Extjs gridpanel doesn't expand horizontally within a tabPanel

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:   ['datachange开发者_StackOverflow中文版d', '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
  ],

Layout is not a valid property for a GridPanel.

Try using:

viewConfig: { forceFit: true }

instead

I was searching the forums for a way to make my grid resize automatically but could not find the solution, nothing worked... and then I read the Ext Js GridPanel documentation: "

A grid requires a width in which to scroll its columns, and a height in which to scroll its rows. These dimensions can either be set explicitly through the height and width configuration options or implicitly set by using the grid as a child item of a Container which will have a layout manager provide the sizing of its child items (for example the Container of the Grid may specify layout:'fit')."

..so I just set not the grid's layout, but the layout of the grids's PARENT to whatever value I want (in my case the parent container holds other things than only the grid, so I set layout : 'anchor', and then by setting the the anchor : '100% 100%' I make the grid expand as much as it can be).

and now I HAVE IT WORKING :D yayyyy!

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.