Extjs grid - как сделать ширину столбца 100%

Свойство 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
            }

Если у меня есть только один столбец, как я могу сделать ширину столбца = 100% или если у меня есть несколько столбцов - как сделать последнее растяжение столбца до конца сетки?

Ответы

Ответ 1

Для ExtJS3 установите forceFit в GridPanels viewConfig. См.: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

Для ExtJS 4 установите forceFit непосредственно на GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit и используйте его в сочетании с flex в своих столбцах.

Пример для 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'       
    }
});

Пример для 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'       
    }
});

Ответ 2

Добавьте flex : 1 в столбец, который вы хотите растянуть.

Ответ 3

Для ExtJS 4 используйте flex вместо ширины. Если вы установите flex: 1, и будет только один столбец, он займет 100% ширину. Если у вас есть два столбца и установите flex: 1 на обоих, обе будут иметь ширину 50%.

Flex распределяет доступную ширину между столбцами по коэффициенту. Например, вы можете сказать flex: 2 для одного столбца и flex: 1 для двух других столбцов, и результат будет таким, что первый из них будет в два раза больше ширины двух других. Вы также можете использовать десятичные значения для flex, например. 0.5

Ответ 4

Обратите внимание, что если у вас есть один столбец в вашей сетке, существует значительная разница между использованием обозначений items:[{}] и items:{}.

Фактически это НЕ будет работать (как минимум в ExtJS 4.2):

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

Если вы просто удалите квадратные скобки, он волшебным образом начнет работать, как ожидалось (т.е. у вас будет один столбец, который будет расширяться, чтобы заполнить ширину сетки).

Это почти сводило меня с ума;-P.

Ответ 5

установить Flex на 1

Column.Flex = 1;