展開 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屬性，因為網格高度將由窗口的大小決定。