Ext.js, nested form bar does not scroll on mobile

I'm new to Ext.js and I am having trouble scrolling a nested form on mobile. I have a grid pane and a form pane both inside the center pane and I hide it based on the selected selection in the western pane. The grid section works fine (and scrolling on mobile thanks to the buffering plugin), but I can't get the form. It scrolls fine on the desktop and even scrolls when I view the mobile view in Chrome dev tools, but when I try to use it on the device itself, there are no scrollbars and I cannot drag the screen. I've tried so many different ways, but here is the gist of what I have. Any suggestions are greatly appreciated.

Ext.define('App.view.main.Main', {
    extend: 'Ext.container.Container',
    plugins: ['viewport', 'responsive'],
    xtype: 'app-main',
    autoscroll: true,
    defaults: {autoscroll: true},
    overflowY: 'auto',
    responsiveConfig: {
        tall: {
            layout: {
                type: 'auto'
            }
        },
        wide: {
            layout: 'border'
        }
    },
    items [{
      xtype: 'panel',
      region'north'
    },{
      xtype: 'panel',
      region'west'
    },{
      xtype: 'panel',
      region:'center'
      autoscroll: true,
      layout: 'fit',
      items: [{
          xtype: grid,
          ......
      },{
          xtype: 'form',
          layout: 'fit',
          height: '500',      
          autoscroll: true,   //this does nothing??
          overflowY: auto,    //this does nothing either???
          responsiveConfig: {
            wide: {
                layout: 'hbox'
            },
            tall: {
                layout: 'auto'
            }
        },  
        layout: {
            type: 'box',
            align: 'stretch'
        },
        items: [{
            xtype: 'textfield'
         },{
            xtype: 'textfield'..... 
         }]
      }]
  }]