需求:用ExtJS5.1.2制作以网格下效果(其中列3是动态的):
ExtJS3的实现方式和5不一样。
基本代码:
为了实现双表头,需要嵌套列。
<代码> {
id:“grid1”,
xtype:“网格”
列:[{
头:“列1 ',
xtype:“gridcolumn”
},{
标题:《列2》,
xtype:“gridcolumn”
},{
头:“列3 ',
xtype:“gridcolumn”,
列:[{
头:“列3 - 1”,
xtype:“gridcolumn”
},{
头:“列3 - 2”,
xtype:“gridcolumn”
},{
头:“列3 - 3”,
xtype:“gridcolumn”
})
})
}
解决思路:
-
<李>
先显示所有动态列,然后隐藏。
——比;失败,使用Ext.getCmp (id) hide()或者显示()会导致页面无响应。这个方法在单表头的时候没有问题。
先全部按单列(不嵌套列)显示,然后使用隐藏()隐藏不需要的列,再合并第一行表头。
——比;目前没有找到实现方法。
——比;使用columnManager.secondHeaderCt。插入(指定位置、列数组)或者添加(列数组)。
代码样本:
<代码> var columnList=[];
columns.push ({
头:“列3 - 1”,
xtype:“gridcolumn”
},{
头:“列3 - 2”,
xtype:“gridcolumn”
},{
头:“列3 - 3”,
xtype:“gridcolumn”
});
var=Ext.getCmp网格(“grid1”);
grid.columnManager.secondHeaderCt.add (
xtype:“gridcolumn”,
头:“列3 ',
列:columnList
);
ExtJS并不建议使用Ext.grid.ColumnManager,官方API也找不到grid.columnManager.secondHeaderCt,可以通过Chrome/F12/控制台/输入“Ext.getCmp(“网格”)。columnManager”找到secondHeaderCt。
