展开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

问题不在于色谱柱，而在于网格本身没有拉伸以完全填充窗体。

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

Answer 3

添加

    flex: 1, 

到其中一列config