子列不适合 ExtJs 4 中的宽网格列答案

【问题标题】：Sub columns does not fit under wide grid column in ExtJs 4子列不适合 ExtJs 4 中的宽网格列
【发布时间】：2014-06-19 17:56:55
【问题描述】：

如果我在 ext 网格中有网格列，子列（演示中的电子邮件和电话列）不匹配。这是演示：https://fiddle.sencha.com/#fiddle/5ih 我玩过宽度/最小宽度等，但似乎不起作用。但是如果我让网格列不那么宽，子列似乎非常适合。

【问题讨论】：

标签： javascript extjs grid

【解决方案1】：

如果您想像其他列一样使用子列，例如您有 2 个固定宽度的列，并且分组列的行为应该像具有 flex（自动宽度）的列，您需要编写一个自己的函数来执行此调整大小。

只有两行：sencha example

说明：您需要将resize 事件监听器添加到网格并在函数内部调整子列的大小

网格监听器：

listeners: {
    resize: function(grid) {
        // you need to add and itemId for the sub columns parent
        var subCols = grid.getView().getHeaderCt().child('#sub-cols');
        // 200 = sum of the fixed width of columns
        subCols.setWidth(grid.getWidth() - 200);
    }
}

网格列：

{
    text: 'sub columns',
    itemId: 'sub-cols',
    columns: [{
        text: 'Email',
        dataIndex: 'email',
        flex: 1
     }, {
        text: 'Phone',
        dataIndex: 'phone',
        flex: 1
     }]
}

【讨论】：

【解决方案2】：

我觉得问题可能是你必须给 minWidth 来修复标题，并将 flex 属性添加到每一列。这是我所说的更改的问题。

minWidth : 500

flex : 1

https://fiddle.sencha.com/#fiddle/5iq

【讨论】：