Question

我有一个分组的标题网格。网格定义可以在小提琴here中找到。

结果如下所示。

enter image description here

我希望所有列的空间相等，包括分组标题内的列。我做错了什么？

Answer 1

Ext JS目前不支持此行为。我有同样的问题。这不是一个真正的错误，因为源代码明确指出你不能这样做，但它似乎是网格最大的缺点之一（紧靠锁定列）。

我的解决方案是覆盖4.1.0中的Ext.grid.ColumnLayout#completeLayout方法。这是确定子项（列）宽度的位置。您基本上要做的是获取网格可用的总宽度（可通过提供的布局/上下文对象获得）并在所有叶子列上手动转换flex-＆gt;宽度。然后，对于每组列，您可以对计算的宽度求和并设置父宽度。在completeLayout方法中执行此操作意味着它会在每个布局期间自动运行，因此您无需在观看调整大小事件等情况下进行调整。

有了一个好的调试器和相当的耐心，你可以搞清楚。我想发布一个代码示例，但我的解决方案大约有100行，是我工作代码的一部分。我仍然可以指出一些警告：

如果您只需支持2个级别的标题，请不要费心使整个方法递归3个级别。 YAGNI。
注意隐藏的列。我相信有一个错误，隐藏的组头没有在子列上设置隐藏属性。我最常见的一个问题是，显示一个专栏会以奇怪的方式改变一切。
注意未密封的群组。我通过使每个柱子密封来解决这个问题，但如果能够自由移动柱子是您的要求的一部分，那么您可能需要采取额外的步骤。

虽然老实说，最好的解决方案是在Sencha论坛上将此文件作为功能请求提交，并询问他们为什么Ext JS库中仍然不存在这样一个重要功能。

编辑：将源代码发布到Sencha support forums。

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
     }]
}

Answer 3

你试图将分组列flex设置为小4倍（注释0.25值），但它实际上不应该大4倍吗？

Extjs flex

分组标题列大小

3 个答案:

它只有两行：sencha example