Extjs gridpanel doesn't expand horizontally within a tabPanel

Question

Each of my 3 Extjs gridpanels do not expand horizontally within a tabPanel.

The each grid's properties:

  id: grid_id,
  ds: ds,
  cm: cm,
  loadMask:      true,
  view:          grouping_view,
  plugins:       [expander, filters],
  stateId:       which + '-grid-stateId',
  stateful:      true,
  stateEvents:   ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'],
  selModel:      checkbox,
  // height:        400,
  width:         GRID_WIDTH,
  defaults:      {autoHeight: true},
  autoHeight:    true,
  collapsible:   false,
  animCollapse:  false,
  layout:        'fit',

TabPanel's properties: id: 'tab_panel', renderTo: 'tabs', activeTab: 0, enableTabScroll: true, defaults: {autoScroll:true, authHeight:true}, plugins: new Ext.ux.TabCloseMenu(), width: GRID_WIDTH + 2, autoHeight: true, items: [ // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them owned_grid, managed_grid, subscribed_grid ],

Answer 1

Layout is not a valid property for a GridPanel.

Try using:

viewConfig: { forceFit: true }

instead

Answer 2

It's the layout of the container that you have to set, ie:

var tp = new Ext.TabPanel({
    items: [{
        title: 'First tab',
        layout: 'fit',
        items: new Ext.GridPanel({ title: "Grid panel" })
    },{
        title: 'Second tab'
    }]
});

Fit layouts mean that there is only one item in the container and it should expand to take all available space. Remove all explicit references to width, autoWidth, etc.