ExtJS5.1.2 實現雙表頭動態列

需求：用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。