是否可以在一个标题下创建一个包含多个列的网格？
+-----------------------+-----------------------+ | Column 1 | Column 2,3,4 | +-----------------------+-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------------------------------+
尝试过列标题分组,但没有办法隐藏子列.它看起来像
+-----------------------+-----------------------+ | Column 1 | Column 2,4 | + +-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------+-----------------------+ | | | | | +-----------------------------------------------+
解决方法
这个需要覆盖.以下是您的列配置应如下所示：
columns: [
{
text: "Column 1",// width,other settings
},{
text: "Columns 2,4",// width is computed as sum of child columns
columns: [
{
text: "",columnName: "Column 2",// custom config
width: // needed
},{
text: "",columnName: "Column 3",width: // needed
},columnName: "Column 4",width: // needed
}
]
}
]
请注意不属于API的columnName配置.这就是我为此做出的贡献.
设置文本：“”隐藏该列的标题.为所有三个子列设置它会隐藏整行,但会在标题所在的位置留下一条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版本候选中的标题容器代码有一些重大更改,我无法保证这将以相同的方式工作.
