展开 Ext JS GridPanel 列宽

Question

我使用 Ext JS 2.3.0 并有一个如下所示的 GridPanel：

我想扩大列的宽度，以便将滚动条推到面板的最右侧，从而消除滚动条右侧的空白空间。

相关代码如下所示：

    var colModel = new Ext.grid.ColumnModel([
        {
            id: 'name',
            header: locale['dialogSearch.column.name'],
            sortable: true,
            dataIndex: 'name'
        }
    ]);

    var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});

    this._searchResultsPanel = new Ext.grid.GridPanel({
        title: locale['dialogSearch.results.name'],
        height: 400,
        layout: 'fit',
        stripeRows: true,
        autoExpandColumn: 'name',
        store: this._searchResultsStore,
        view: new Ext.grid.GridView(),
        colModel: colModel,
        selModel: selModel,
        hidden: true,
        buttonAlign: 'center',
        buttons: [
            {
                text: locale["dialogSearch.button.add"],
                width: 50,
                handler: function () {
                }
            },
            {
                text: locale["dialogSearch.button.cancel"],
                width: 50,
                handler: function () {
                    entitySearchWindow.close();
                }
            }
        ]
    });

Answer 1

您应该为网格视图使用 forceFit 配置：

this._searchResultsPanel = new Ext.grid.GridPanel({
        title: locale['dialogSearch.results.name'],
        height: 400,
        layout: 'fit',
        viewConfig: {
          forceFit: true
        }, ....

我不确定这是否多余，因此您可以删除此部分view: new Ext.grid.GridView(),

Answer 2

添加

    flex: 1, 

到列配置之一

Answer 3

问题不在于列，而在于网格本身不会拉伸以完全填充窗口主体。

将layout: 'fit'属性放在窗口配置上，而不是放在网格配置上（需要删除的地方）。 您还应该删除height属性，因为网格高度将由窗口的大小决定。