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

Question

如果我在ext网格中有网格列，则子列（ 演示中的电子邮件和电话列不匹配。 以下是演示：https://fiddle.sencha.com/#fiddle/5ih 我玩过宽度/分钟宽度等，但似乎没有用。 但是，如果我使网格列不那么宽，则子列似乎完全适合。

Answer 1

我很瘦可能问题是你必须给 minWidth 来修复标题， 并将 flex 属性添加到每个列。 这是我说的改变的小提琴。

minWidth : 500

flex : 1

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

Answer 2

如果您想像其他子列一样使用子列，例如，您有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
     }]
}