分组标题列大小

Question

我有一个分组标题网格。 网格定义可以在这里找到。

结果看起来像这样。

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

Answer 1

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

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

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

1. 如果您只需要支持2个级别的标题，请不要费心使整个方法递归3个级别。 YAGNI。

2. 注意隐藏的列。 我相信有一个错误，隐藏的组头没有在子列上设置隐藏属性。 我最常见的一个问题是，显示一个专栏会以奇怪的方式改变一切。

3. 注意未密封的团体。 我通过使每个柱密封来解决这个问题，但如果能够自由移动柱是您的要求的一部分，那么您可能需要采取额外的步骤。

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

编辑：发布源代码到Sencha支持论坛 。

Answer 2

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

它只有两行： sencha的例子

说明：您需要向网格添加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