Sencha touch Scrolling issue for Card Layout on android and iOS devices

Question

I have been struggling on this issue for quite a few days and finally seeking help from community to get some solution.

I have Sencha touch app created in version 2.4.1. App has a usual login screen, which leads to a member Center page which has a scrolling menu on left and navigation bar with panel in main area. The views in main area get added or removed from navigation stack depending upon menu selection on left or button click on panel. Some form panels need to scroll to show content. These panels scroll perfectly in all browsers (Chrome, Safari, Firefox), but on actual devices same form panels do not scroll. The login panel scrolls correctly, but as soon as member center is opened any further scrolling back on login panel (After logout) stops working.

1. For login view, code is as follows which works fine,

   config: {

   fullscreen: false,
   
   itemId: 'LoginView',
   
   layout: {
       type: 'vbox', 
       align: 'center',
       pack: 'center'
   },
   
   scrollable: {
       direction: 'vertical',
       directionLock : true
   },
   
   items: [
       {
           xtype: 'toolbar',
           docked: 'top',
           scrollable: null,
           title: 'My App',
           items: [
               {
   

2. Member center is loaded as follows in login controller:

           Ext.Viewport.setActiveItem({
               xtype: 'MemberCenterNavView'
           });
   

3. Member center has following code

   config: {

   itemId: 'MemberCenterNavView',
   
   layout: {
       type: 'card',
       animation: false
   },
   
   autoDestroy: true,
   fullscreen: true,
   
   navigationBar: {
   
       itemId: 'navBar',
       docked: 'top',
   
       items: [
               ....
      ]
   },
   
   items: [
   
       {
           xtype: 'DashboardView',
           title: 'Home'
       }
   
   ]
   

4. Menu is created in member center view as follows

   //function goes here createMenu: function(){

   var menu = Ext.create('Ext.Menu', {
       width: window.innerWidth * 0.4,
       minWidth: 150,
       scrollable: 'vertical',
       items: [
           {
               xtype: 'toolbar',
               docked: 'top',
               scrollable: null,
               title: 'Explore',
               items: [
   

5. Menu is loaded loaded on left and managed on button click of navigation panel

   loadMenu: function(){ Ext.Viewport.setMenu(this.createMenu(),{ side: 'left', reveal: true }); },

6. Initialize function call load menu

   initialize : function() { this.callParent(arguments); this.loadMenu(); },

The code is based on example of facebook style navigation panel examples available on few sites. Please advice.