Question

属性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％或者如果我有几列 - 如何使最后一列拉伸到网格结束？

Answer 1

对于ExtJS3，在GridPanels forceFit上设置viewConfig。请参阅：http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

对于ExtJS 4，直接在GridPanel上设置forceFit：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'       
    }
});

Answer 2

将flex : 1添加到您要拉伸的列。

Answer 3

对于ExtJS 4，使用flex而不是width。如果设置flex：1且只有一列，则宽度为100％。如果你有两列并且两者都设置了flex：1，则两者都有50％的宽度。

Flex按比例分配列之间的可用宽度。例如，你可以说flex：2表示一列，flex表示1表示另外两列，结果是第一列的宽度是另外两列的两倍。您也可以使用十进制值进行flex，例如0.5

Answer 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。

Answer 5

将Flex设置为1

Column.Flex = 1;

extjs网格 - 如何使列宽100％

5 个答案: