I am creating an Application that consist of a Panel, This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
- Shows the Form-Panel
- Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ? A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({ itemTpl : '{emplFirstName} {emplLastName}' ,store : storeRequestTracker ,fullscreen: true }); lstRequestTracker.on('itemtap', function( oThis, index, item, event) { var rec = oThis.getStore().getAt(index); tpnlMyForms.hide(); fpnlOnBoard.show(); //pnlMain.doComponentLayout(); fpnlOnBoard.doComponentLayout(); });
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({ tabBar : {dock : 'bottom', layout:'hbox'} ,fullscreen : true ,defaults : {scroll: 'vertical', layout:'fit'} ,items : [ { title : 'Request Tracker' ,items : [lstRequestTracker] ,iconCls: 'time' } ] }); var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields}); Ext.setup({ onReady: function() { var pnlMain = new Ext.Panel({ fullscreen : true ,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}] ,layout: 'fit' ,items : [tpnlMyForms,fpnlOnBoard] }); fpnlOnBoard.hide(); }// eo onReady Function });