title: ExtJS 4 Stretch height of the grid to parent component
body: <p>I'm trying to stretch height of the <code>xtype: 'grid1'</code> to its parent element (tab on a tabpanel).</p>
  
  <p>Here is my code:</p>
  
  <pre><code>Ext.define('My.view.Example', {
      extend: 'Ext.tab.Panel',
      region: 'center',
      id: 'objectsManageArea',
      items: [{
          title: "Tab 1",
          items: [
              {
                  border: false,
                  items: [
                      {
                          xtype: 'panel',
                          layout: {
                              type: 'vbox',
                              align: 'stretch'
                          },
                          border: false,
                          items: [
                              {
                                  xtype: 'grid1',
                                  flex: 1
                              }
                          ]
                      }
                  ]
              }
          ]
      },
      {
          title: "Tab 2",
          items: [
              {
                  xtype: 'panel',
                  layout: {
                      type: 'hbox',
                      align: 'stretch'
                  },
                  border: false,
                  items: [
                      {
                          xtype: 'panel',
                          layout: {
                              type: 'vbox',
                              align: 'stretch'
                          },
                          flex: 1,
                          border: false,
                          items: [
                              {
                                  xtype: 'grid2',
                                  flex: 1
                              }
                          ]
                      },
                      {
                          xtype: 'panel',
                          layout: {
                              type: 'vbox',
                              align: 'stretch',
                              pack: 'center'
                          },
                          items: [
                              {
                                  xtype: 'button',
                                  iconCls: 'icon-greater-than',
                                  margin: '0 5 5 5'
                              },
                              {
                                  xtype: 'button',
                                  iconCls: 'icon-less-than',
                                  margin: '0 5 0 5'
                              }
                          ]
                      },
                      {
                          xtype: 'panel',
                          layout: {
                              type: 'vbox',
                              align: 'stretch'
                          },
                          flex: 1,
                          border: false,
                          items: [
                              {
                                  xtype: 'treegrid1',
                                  flex: 1
                              }
                          ]
                      }
                  ]
              }
          ]
      }]
  });
  </code></pre>
  
  <p>On 'Tab 2' (with grid, panel with two buttons and treegrid) everything is ok, but on 'Tab 1' nested <code>xtype: 'grid1'</code> is set to the height of its content. I tried various versions with vbox, but nothing works. What could be the problem?</p>