4

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

结果看起来像这样。

在此处输入图像描述

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

4

3 回答 3

3

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

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

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

  1. 如果您只需要支持 2 级标头，则不必费心使整个方法递归 3 级以上。雅尼。

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

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

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

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

于 2012-09-13T12:21:14.677 回答
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
     }]
}
于 2015-02-20T18:51:47.487 回答
-1

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

Extjs 弹性

于 2012-09-13T11:16:23.930 回答