meyerovb
20 Jul 2010, 11:19 AM
Load the below example on an iPhone in portait orientation (the label for Text2 shold appear, but not the second textfield). Click the first text field to bring up the keyboard, on the keyboard click next.
Issue > notice the screen doesn't scroll to the next position correctly, you see the cursor blinking in the Text1 label.
Type a character, the screen will now auto-scroll to correct the view. Click Done on the keyboard to hide it. Now scroll the form to the top.
Issue > notice the padding at the top of the form is now gone, and the first Line text is actually a bit cut off. If you scroll to the bottom of the form you'll notice extra space below the fieldset.
Ext.setup({ onReady: function () {
new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom' },
items: [
{ title: 'Tab1', xtype: 'form', scroll: 'vertical',
items: [
{ xtype: 'fieldset', title: 'Line<br/>Line<br/>Line<br/>Line<br/>Line<br/>',
items: [
{ xtype: 'textfield', labelAlign: 'top', label: 'Text1' },
{ xtype: 'textfield', labelAlign: 'top', label: 'Text2'}]
}]
}]
});
}});
Issue > notice the screen doesn't scroll to the next position correctly, you see the cursor blinking in the Text1 label.
Type a character, the screen will now auto-scroll to correct the view. Click Done on the keyboard to hide it. Now scroll the form to the top.
Issue > notice the padding at the top of the form is now gone, and the first Line text is actually a bit cut off. If you scroll to the bottom of the form you'll notice extra space below the fieldset.
Ext.setup({ onReady: function () {
new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom' },
items: [
{ title: 'Tab1', xtype: 'form', scroll: 'vertical',
items: [
{ xtype: 'fieldset', title: 'Line<br/>Line<br/>Line<br/>Line<br/>Line<br/>',
items: [
{ xtype: 'textfield', labelAlign: 'top', label: 'Text1' },
{ xtype: 'textfield', labelAlign: 'top', label: 'Text2'}]
}]
}]
});
}});