extjs4 how to automatically set grid column width to max width of contents?

Question

If you create a grid with no column width or flex attributes, the columns will default to 100px each.

If you then double click on a header separator, the column to the left auto expands to the size of the largest data item in that column.

Is there any way to configure some columns to automatically have that behavior?

Answer 1

forceFit: true on your GridView config will force the columns to fill all remaining space.

forceFit : Boolean Specify true to have the column widths re-proportioned at all times.

The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually or programmatically), the other columns in the grid will be resized to fit the grid width.

Columns which are configured with fixed: true are omitted from being resized.

Answer 2

So I guess forceFit is no longer recommended by sencha, you should try using the autoSize method:
Edit: There you go with an brief example, it works on the first column :)

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name',  width: 150, autoSizeColumn: true },
        { text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
        { text: 'Phone', dataIndex: 'phone', width: 150 }
    ],
    viewConfig: {
        listeners: {
            refresh: function(dataview) {
                dataview.panel.columns[0].autoSize();//works on the first colum
            }
        }
    },
    width: 450,
    renderTo: Ext.getBody()
});

I had the same problem, hope it helps!