ExtJS5.1.2 实现双表头动态列

基本代码：
为了实现双表头，需要嵌套columns。

{ ???id : ‘grid1‘, ???xtype : ‘grid‘ ???columns : [{ ???????????header : ‘列1‘, ???????????xtype : ‘gridcolumn‘ ???????}, { ???????????header : ‘列2‘, ???????????xtype : ‘gridcolumn‘ ???????}, { ???????????header : ‘列3‘, ???????????xtype : ‘gridcolumn‘, ???????????columns : [{ ???????????????????header : ‘列3-1‘, ???????????????????xtype : ‘gridcolumn‘ ???????????????} , { ???????????????????header : ‘列3-2‘, ???????????????????xtype : ‘gridcolumn‘ ???????????????}, { ???????????????????header : ‘列3-3‘, ???????????????????xtype : ‘gridcolumn‘ ???????????????}] ???????}]}

解决思路：

1. 先显示所有动态列，然后隐藏。
   --> 失败，使用Ext.getCmp(id).hide()或者show()会导致页面无响应。这个方法在单表头的时候没有问题。

2. 先全部按单列(不嵌套columns)显示，然后使用hide()隐藏不需要的列，再合并第一行表头。
   --> 目前没有找到实现方法。

3. 动态追加列3。
   --> 使用columnManager.secondHeaderCt.insert(指定位置, column数组)或者add(column数组)。
   代码样本：

   var columnList = [];columns.push({ ???header : ‘列3-1‘, ???xtype : ‘gridcolumn‘}， { ???header : ‘列3-2‘, ???xtype : ‘gridcolumn‘}， { ???header : ‘列3-3‘, ???xtype : ‘gridcolumn‘});var grid = Ext.getCmp(‘grid1‘);grid.columnManager.secondHeaderCt.add( ???xtype : ‘gridcolumn‘, ???header : ‘列3‘, ???columns : columnList);

ExtJS并不建议使用Ext.grid.ColumnManager，官方API也找不到grid.columnManager.secondHeaderCt，可以通过Chrome/F12/Console/输入“Ext.getCmp(‘grid‘).columnManager”找到secondHeaderCt。

ExtJS5.1.2 实现双表头动态列

原文地址：http://blog.51cto.com/13685327/2351363