展开 Ext JS GridPanel 列宽答案

【问题标题】：expand Ext JS GridPanel column width展开 Ext JS GridPanel 列宽
【发布时间】：2011-11-16 12:11:16
【问题描述】：

我使用 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();
                }
            }
        ]
    });

【问题讨论】：

标签： javascript extjs

【解决方案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(),

【讨论】：

我的代码中没有view: new Ext.grid.GridView()
你在上面的网格配置中已经有了。取而代之的是，您可以将 viewConfig 放在上面

【解决方案2】：

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

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

【讨论】：

我的第一个想法是一样的，但是如果你看代码，网格实际上包含按钮和标题，所以网格实际上是正确的大小，是列的问题跨度>
您是否尝试删除 layout 和 height 属性？
你是否在窗口渲染后添加网格？如果是这样，请在添加组件后执行win.doLayout()。

【解决方案3】：

添加

    flex: 1,

到其中一列配置

【讨论】：