ExtJS 3 grid autowidth

Question

In the ExtJS 3, how to set a grid to auto width? I have tried the codes below, it doesn't work.

Thanks

var exceptionGrid = new Ext.grid.GridPanel({
    store: exceptionStore,
    loadMask: true,
    frame: true,
    // defaultWidth: 450,
    //height: 560,
    autoHeight: true,
    autoWidth: true,
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [{
            header: 'COL1',
            dataIndex: 'COL1'
        }, {
            header: 'COL2',
            dataIndex: 'COL2'
        }, {
            header: 'COL3',
            dataIndex: 'COL3'
        }, .....]
    }),
    viewConfig: {
        forceFit: false
    }
});

Answer 1

From extjs 3 docs:

GridPanel

Notes:

 - Although this class inherits many configuration options from base
   classes, some of them (such as autoScroll, autoWidth, layout, items,
   etc) are not used by this class, and will have no effect.

 - 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').

Grid's width by default takes containers width of course if it was not specified. Ext.grid.GridPanel#autoExpandColumn will help to expand one column in the grid taking the resting horizontal space. Also will be helpsul to look at Ext.grid.GridView's forceFit and autoFill adjusting widths of columns.