I have a very long form, so the user needs to scroll down the form. When mouse is used to scroll, the form scroll down temporarily, but as soon the mouse is released the form again scrolls up. It works fine when using tab. Update - I have tried it on iPhone & Android device too, the same issue persists.
Here is my form panel :
Ext.define('MyApp.view.Register', {
extend: 'Ext.form.Panel',
xtype: 'registerpage',
id: 'createPatientForm',
config: {
title: 'Registration',
iconCls: 'star',
scroll: 'vertical',
pinHeaders: true,
styleHtmlContent: true,
autoScroll: true,
layout:{
type: 'vbox'
},
items: [{
xtype: 'fieldset',
title: 'Registration',
align: 'center',
centered: true,
items: [{
xtype: 'textfield',
label: 'First Name',
name: 'firstName'
},
{
xtype: 'textfield',
label: 'Last Name',
name: 'lastName'
}
//many more items in the form.........
]
}]
}]
}
});
If you use Sencha Touch 2 remove autoScroll and change scroll to
scrollable: {
direction: 'vertical',
directionLock: true
}
Sencha Touch 2 API http://docs.sencha.com/touch/2-0/#!/api/Ext.Panel-cfg-scrollable
Try this
Ext.define('overrides.SizeMonitor', { override: 'Ext.util.SizeMonitor', constructor: function (config) { var namespace = Ext.util.sizemonitor; return new namespace.Scroll(config); } }); Ext.define('overrides.SizeMonitor', { override: 'Ext.util.PaintMonitor', constructor: function (config) { return new Ext.util.paintmonitor.CssAnimation(config); } });
Sencha Touch 1 and 2 does not support the normal mouse scroll wheel. You must tap and drag on all devices.
Update
You do not need autoScroll
in your configuration. You also need to take out the layout: 'vbox'
as it is not needed. If you do those two things, it should just work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.