CODEWITHSUNDEEP
gridextjs4
Subdigger
Subdigger

Reputation: 2203

extjs grid - how to make column width 100%

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?

Upvotes: 13

Views: 44215

Answers (5)

Nux
Nux

Reputation: 10052

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.

Upvotes: 0

mhd
mhd

Reputation: 444

set Flex to 1

Column.Flex = 1;

Upvotes: -2

Ali Jalbani
Ali Jalbani

Reputation: 91

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

Upvotes: 9

Farish
Farish

Reputation: 618

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

Upvotes: 2

Rem.co
Rem.co

Reputation: 3831

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'       
    }
});

Upvotes: 30

Related Questions