Why does my gridPanel in a tabPanel show the wrong height?

In the attached image, the grid does not show properly. The grid is inside a tabpanel. The layout of the tab is = 'fit'.

What setting error is causing the behavior? EDIT: Here is the class definition for the tabpanel: Our tab is the one called 'External ID'

/*
 * File: SomeTabPanel.ui.js
 * Date: Mon May 02 2011 18:08:34 GMT-0400 (Eastern Daylight Time)
 * 
 * This file was generated by Ext Designer version xds-1.0.3.2.
 * http://www.extjs.com/products/designer/
 *
 * This file will be auto-generated each and everytime you export.
 *
 * Do NOT hand edit this file.
 */

SomeTabPanelUi = Ext.extend(Ext.TabPanel, {
   activeTab: 0,
   forceLayout: true,
   border: false,
   enableTabScroll: true,
   initComponent: function() {
      this.items = [{
         xtype: 'panel',
         tit开发者_开发技巧le: 'General',
         layout: 'table',
         tpl: '',
         ref: 'GeneralTab',
         layoutConfig: {
            columns: 2
         },
         items: [{
            xtype: 'form',
            title: 'Corporate',
            height: 500,
            width: 500,
            animCollapse: false,
            items: [{
               xtype: 'box',
               ref: '../../coporateBox'
            }]
         }]
      },{
         xtype: 'panel',
         title: 'External ID',
         layout: 'fit',
         ref: 'ExtIdTab',
         id: ''
      }];
      SomeTabPanelUi.superclass.initComponent.call(this);
   }
});

Looks like you need to set a height for the grid somehow. Either a manual height declaration, autoHeight: true, or inherited height from a parent container.

Does the parent tabPanel have a height declared/inherited?

Setting layout: 'fit' is a good start for the containing tab, but without some code or a test case, I can't be more helpful.

It should work as described, so you must have something wrong in your code. Post your layout code if you want more help.