extjs grid - how to make column width 100%

Question

The property width is a pixel width.

{
                xtype: 'grid',
                store: store,
                selModel: Ext.create('Ext.selection.CheckboxModel', {
                    mode: 'SINGLE'
                }),
                layout: 'fit',
                columns: [
                    {
                        text: "pum",
                        dataIndex: 'SRD_NAME_FL',
                        width: 400
                    }
                ],
                columnLines: true
            }

if i have only one column how can i make column width = 100% or if i have several columns - how to make last column stretch to end of grid?

Answer 1

For ExtJS3, set forceFit on the GridPanels viewConfig. See: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

For ExtJS 4 set forceFit directly on the GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit and use it in conjunction with flex on your columns.

Example for v4

var p = Ext.Create('Ext.grid.Panel',{
    forceFit: true,
    columns: [{
        xtype: 'gridcolumn',
        header: _ll.id,
        sortable: true,
        resizable: false,
        flex: 0, //Will not be resized
        width: 60,
        dataIndex: 'Id'
    }, {
        xtype: 'gridcolumn',
        header: __ll.num,
        sortable: true,
        resizable: true,
        flex: 1,
        width: 100,
        dataIndex: 'number'       
    }
});

Example for v3

var p = new Ext.grid.GridPanel({
    viewConfig: {
            forceFit: true
    },
    columns: [{
        xtype: 'gridcolumn',
        header: _ll.id,
        sortable: true,
        resizable: false,
        fixed: true, //Will not be resized
        width: 60,
        dataIndex: 'Id'
    }, {
        xtype: 'gridcolumn',
        header: __ll.num,
        sortable: true,
        resizable: true,
        width: 100,
        dataIndex: 'number'       
    }
});

Answer 2

Add flex : 1 to the column you want to stretch.

Answer 3

For ExtJS 4, use flex instead of width. If you set flex: 1 and there is only one column, it will take 100% width. If you have two columns and set flex: 1 on both, both will have 50% width.

Flex distributes the available width between the columns by ratio. You may for example say flex: 2 for one column and flex: 1 for two other columns and the result would be that the first one would be twice the width of the other two. You may also use decimal values for flex e.g. 0.5

Answer 4

Notice that if you have a single column in your grid there is a significant difference between using items:[{}] and items:{} notation.

In fact this will NOT work as expected (at least in ExtJS 4.2):

Ext.define('My.SingleColumnGrid', {
    extend: 'Ext.grid.Panel',
    store: {type: 'someStore'},
    forceFit: true,
    columns: {
        items: [
            {
                text: 'Something',
                flex: 1,
                dataIndex: 'something'
            }
        ]
    }
});

If you just remove square brackets it will magically start to work as expected (i.e. you will have a single column that extends to fill grid width).

This almost drove me crazy ;-P.

Answer 5

set Flex to 1

Column.Flex = 1;