4

是否可以在一个标题下创建一个包含多列的网格？

+------------------------+------------------------+
| 第 1 栏 | 第 2,3,4 栏 |
+------------------------+------------------------+
| | | | |
+------------------------+------------------------+
| | | | |
+------------------------+------------------------+
| | | | |
+------------------------------------------------+

尝试了列标题分组，但无法隐藏子列。它看起来像

+------------------------+------------------------+
| 第 1 栏 | 第 2,3,4 栏 |
+ +------------------------+
| | | | |
+------------------------+------------------------+
| | | | |
+------------------------+------------------------+
| | | | |
+------------------------------------------------+
4

2 回答 2

2

这需要一个覆盖。这是您的列配置应如下所示：

columns: [
    {
        text: "Column 1",
        // width, other settings
    },
    {
        text: "Columns 2, 3, 4",
        // width is computed as sum of child columns
        columns: [
            {
                text: "",
                columnName: "Column 2",  // custom config
                width: // needed
            },
            {
                text: "",
                columnName: "Column 3",
                width: // needed
            },
            {
                text: "",
                columnName: "Column 4",
                width: // needed
            }
        ]
    }
]

请注意columnName不属于 API 的配置。这是我弥补的。

设置text: ""隐藏该列的标题。为所有三个子列设置它会隐藏整行，但会在标题所在的位置留下一条 2px 高的细线。不知道如何删除它。也许能够将它的 CSS 去掉。

这将为您提供所需的布局。您可以通过主列的菜单隐藏子列。但是，菜单看起来不正确，因为没有文本。这就是columnName进来的地方。

查找源代码Ext.grid.header.Container#getColumnMenu。您需要为这个函数创建一个覆盖。事情是这样的：

Ext.override(Ext.grid.header.Container, {
    getColumnMenu: function(headerContainer) {
        // stuff 
        for (; i < itemsLn; i++) {
            item = items[i];
            menuItem = Ext.create("Ext.menu.CheckItem", {
                text: item.columnName || item.text  // <--- IMPORTANT LINE
        // rest of the function is the same
    }
});

如果它存在，这将获取您的columnName配置，而不会影响不使用它的现有列。现在，当您单击多列的标题触发器时，您将获得子列的嵌套选项。如果你想变得花哨，你应该能够通过更多的覆盖来展平隐藏选项，但我将把它留给你。

注意：这都是在 Ext JS 4.0.7 上测试的。4.1 候选版本中的标头容器代码发生了一些重大变化，我不能保证这会以相同的方式工作。

于 2012-04-13T14:14:27.127 回答
1

只需在子标题列配置上添加样式属性，如下所示：

columns: [{
    header: 'Header',
    defaults: {
      style: { display: 'none !important' } <--here is the magic
    },
    items: [{
      header: '',
      dataIndex: ''
    },{
      header: '',
      dataIndex: ''
    }]   
}]
于 2019-10-02T06:30:14.247 回答