title: ExtJS - autoScroll doesn't show in nested grid
body: <p>I've been trying to find an answer to this problem for the last 24 hours and couldn't find a way to resolve this. Here it is:</p>
  
  <p>I'm using MVC architecture with ExtJS 4. I have a tabpanel that has some grid as items. When these grids load, they do not have a vertical scrollbar, even though I set autoScroll to 'true' and their content is bigger than the screen can show. Every post I read about this problem was resolved setting the grid's parent layout to 'fit', but, as you can see below, I already done it and still not have a scrollbar... If I define a height to the grid, the scrollbar works perfectly, but I need it to work with different heights...
  I belive I might have a overnesting problem, but I just started developing with ExtJS some days ago and it stills a little confusing to me...</p>
  
  <p>The question is: how can I make this structure work with autoScroll?</p>
  
  <p>SO won't let me post an image here as my reputation is lower than 10, <a href="http://i.stack.imgur.com/VoMzf.png" rel="nofollow">so you can find my app's structure here</a></p>
  
  <p>Please note that I wrote "layout: 'fix'" in the image, but I meant "layout: 'fit'" :)</p>
  
  <p>This is my Main view, which has 2 panels. The 'center' one is where I load the tabpanel that has the grid. </p>
  
  <pre><code>Ext.define('MyApp.view.Main', {
  extend: 'Ext.container.Container',
  
  requires:[
      // 'Ext.tab.Panel',
      // 'Ext.layout.container.Border',
      'MyApp.view.Menus'
  ],
  
  xtype: 'app-main',
  
  layout: {
      type: 'border'
  },
  
  items: [
      {
          region: 'north',
          xtype: 'panel',
          padding: '5 5 0 5',
          title: 'MyApp',
          items: {
              xtype: 'menus'
          }
      }, 
      {
          region: 'center',
          itemId: 'centerPanel',
          xtype: 'panel',
          padding: 5,
          layout: 'fit'
      }
  ]
  });
  </code></pre>
  
  <p>This is the view that have the fieldset and the tabpanel as items:</p>
  
  <pre><code>Ext.define('MyApp.view.licencas.List', {
  extend: 'Ext.form.Panel',
  xtype: 'licencaslist',
  title: 'Licenças de software',
  border: false,
  items: [
      {
          xtype: 'fieldset',
          title: 'Dados do Ve&amp;iacute;culo',
          margin: 5,
          items: [
              {
                  xtype: 'combobox',
                  anchor: '100%',
                  valueField: 'id',
                  displayField: 'descricao',
                  store: 'ComboEmpresas',
                  typeAhead: true,
                  queryMode: 'local',
                  name: 'empresa',
                  fieldLabel: 'Empresa'
              },
              {
                  xtype: 'combobox',
                  editable: false,
                  valueField: 'id',
                  displayField: 'descricao',
                  store: 'ComboSoftwares',
                  queryMode: 'local',
                  name: 'software',
                  fieldLabel: 'Software'
              },
              {
                  name: 'valor',
                  fieldLabel: 'Valor empresa:',
                  xtype: 'numberfield',
                  minValue: 0,
                  maxValue: 100000,
                  allowDecimals: true,
                  disabled: true,
              },
              {
                  name: 'contrato',
                  fieldLabel: 'Contrato:',
                  xtype: 'textfield',
                  disabled: true,
              },
              {
                  name: 'demonstracao',
                  xtype: 'checkbox',
                  fieldLabel: 'Demonstra&amp;ccedil;&amp;atilde;o',
                  disabled: true,
              }
          ]
      },
      {
          xtype: 'licencastabpanel',
          border: false,
          margin: 5
      }
  ],
  
  initComponent: function() {
      this.callParent(arguments)
  }
  });
  </code></pre>
  
  <p>And finally this is the grid where I need the autoScroll property...</p>
  
  <pre><code>Ext.define('MyApp.view.licencas.placas.List', {
  extend: 'Ext.grid.Panel',
  xtype: 'licencasplacaslist',
  store: 'EmpresaVeiculos',
  border: false,
  forceFit: true,
  autoScroll: true,
  plugins: [new Ext.grid.plugin.CellEditing({
      clicksToEdit: 1,
  })],
  dockedItems: [
      {
          dock: 'top',
          xtype: 'toolbar',
          items: [
              {
                  text: 'Alterar todos',
                  iconCls: 'money-16',
                  action: 'alterartodos',
                  xtype: 'button'
              },
              '-&gt;',
              {
                  xtype: 'trigger',            
                  name: 'searchfieldLicencasPlacas',
                  itemId: 'searchfieldLicencasPlacas',
                  emptyText: 'Filtrar por placa...',
                  width: '500px',
                  hideLabel: true,
                  selectOnFocus: true,
                  triggerCls: 'x-form-search-trigger'
              }                     
          ]
      }
  ],
  columns: [
      Ext.create('Ext.grid.RowNumberer'),
      {       
          text: "Placa",
          dataIndex: 'placa',
          width: 70
      },
      {       
          text: "Serial",
          dataIndex: 'serial',
          width: 70
      },
      {
          text: "Condutor",
          dataIndex: 'condutor'
      },
      {
          text: "Ativo",
          dataIndex: 'ativo',
          width: 50
      },
      {
          text: "Data In&amp;iacute;cio",
          dataIndex: 'data_inicio',
          format: 'd.m.Y',
          width: 60
      },
      {
          text: "Data Fim",
          dataIndex: 'dt_fim',
          format: 'd.m.Y',
          width: 60,
          editor: {
              xtype: 'datefield',
              format: 'd.m.Y'
          }
      },
      {
          text: "Contrato",
          dataIndex: 'contrato',
          width: 70,
          editor: {
              xtype: 'textfield'
          }
      },
      {
          text: "Software",
          dataIndex: 'valor_software',
          renderer: 'usMoney',
          width: 70,
          editor: {
              xtype: 'numberfield',
              minValue: 0,
              maxValue: 1000,
              allowDecimals : true
          }
      },
      {
          text: "Comunicação",
          dataIndex: 'valor_comunicacao',
          renderer: 'usMoney',
          width: 70,
          editor: {
              xtype: 'numberfield',
              minValue: 0,
              maxValue: 1000,
              allowDecimals : true
          }
      },
      {
          text: "Comodato",
          dataIndex: 'valor_comodato',
          renderer: 'usMoney',
          width: 70,
          editor: {
              xtype: 'numberfield',
              minValue: 0,
              maxValue: 1000,
              allowDecimals : true
          }
      },
      {
          text: 'Empresa para faturar',
          dataIndex: 'fatura',
          width: 200,
          editor:
              {
                  xtype: 'combobox',
                  displayField: 'descricao',
                  valueField: 'descricao',
                  store: 'ComboFaturas',
                  name: 'software',
                  queryMode: 'local'
              }
  
      }
  ],
  
  initComponent: function() {
      this.callParent(arguments)
  }
  });
  </code></pre>
  
  <p>Please, note that I removed all "layout: 'fit'" (except from the Main view, which has influence over other views) from the code as it wasn't working anyway... :)</p>
  
  <p>Please, let me know if I need to provide you any extra information. I tried to make it easier to understand with the image below.</p>
  
  <p>Thank you guys!</p>