Extjs gridpanel doesn't expand horizontally within a tabPanel - extjs

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

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!

Answer 3

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.