需求：用ExtJS5.1.2制作以下Grid效果(其中列3是动态的)： ExtJS3的实现方式和5不一样。

基本代码： 为了实现双表头，需要嵌套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。