Question

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

+-----------------------+-----------------------+
|        Column 1       |    Column 2,3,4       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------------------------------+

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

+-----------------------+-----------------------+
|        Column 1       |    Column 2,3,4       |
+                       +-----------------------+
|                       |        |      |       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------+-----------------------+
|                       |        |      |       |
+-----------------------------------------------+

Answer 1

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

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

请注意不属于API的columnName配置。这就是我为此做出的贡献。

设置text: ""会隐藏该列的标头。为所有三个子列设置它会隐藏整行，但会在标题所在的位置留下一条2px的细线。不知道如何删除它。可能会把它带走。

这将为您提供所需的布局。您可以通过主列的菜单隐藏子列。但是，菜单看起来不正确，因为没有文字。这就是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版本候选版本中的标题容器代码有一些重大更改，我无法保证这将以相同的方式工作。

Answer 2

您还可以参考下面的示例，了解有关合并列等的更多功能

http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid

Answer 3

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

columns: [{
    header: 'Header',
    defaults: {
      style: { display: 'none !important' } <--here is the magic
    },
    items: [{
      header: '',
      dataIndex: ''
    },{
      header: '',
      dataIndex: ''
    }]   
}]

ExtJs：多列的一个列标题

3 个答案: