2
votes

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
});



1

1 Answers

0
votes

Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..