extjs 構建gridpanel多表頭

1.先引用相應的js和css文件

2.定義數組和臨時變量（全局）

var cmItems = [];
var cmConfig;
var continentGroupRow = [];

3.主頁面板為上下布局時

        //主面板
        var viewport = new Ext.Viewport({
            layout: 'border',
            id: 'divCenterPanel',
            items: [
                    {
                        region: 'center',
                        layout: 'fit',
                        items: [panGrid]//這里panGrid是panel
                    }, {
                        region: 'north',
                        layout: 'fit',
                        height: 110,
                        items: [pnForm]
                    }
                ]
        });

4.畫面初始狀態可以根據需要定義store或column

       //定義Store初始化狀態
        var storeAccountList = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({ url: '...', method: "post", async: true }),
            reader: new Ext.data.XmlReader(
            {
                totalProperty: 'totalRecords',
                record: 'row'
            },
            [
                { name: 'ITEMSERIAL' }, { name: 'ITEMSERIALNAME' }, { name: 'CPXNAME' }, { name: 'PQTY' }, { name: 'SQTY' }, { name: 'IQTY' },
                { name: 'GRNQTY1' }, { name: 'GRNAMOUNT1' }, { name: 'SALESQTY1' },{ name: 'SALESAMOUNT1' }, 
                { name: 'BUDGETQTY1' }, { name: 'BUDGETAMOUNT1' },{ name: 'INVENTORYQTY1' },{ name: 'INVENTORYAMOUNT1' },
                { name: 'GRNQTY2' }, { name: 'GRNAMOUNT2' }, { name: 'SALESQTY2' },{ name: 'SALESAMOUNT2' }, 
                { name: 'BUDGETQTY2' }, { name: 'BUDGETAMOUNT2' },{ name: 'INVENTORYQTY2' },{ name: 'INVENTORYAMOUNT2' },
                { name: 'GRNQTY3' }, { name: 'GRNAMOUNT3' }, { name: 'SALESQTY3' },{ name: 'SALESAMOUNT3' }, 
                { name: 'BUDGETQTY3' }, { name: 'BUDGETAMOUNT3' },{ name: 'INVENTORYQTY3' },{ name: 'INVENTORYAMOUNT3' },
                { name: 'GRNQTY4' }, { name: 'GRNAMOUNT4' }, { name: 'SALESQTY4' },{ name: 'SALESAMOUNT4' }, 
                { name: 'BUDGETQTY4' }, { name: 'BUDGETAMOUNT4' },{ name: 'INVENTORYQTY4' },{ name: 'INVENTORYAMOUNT4' },
                { name: 'GRNQTY5' }, { name: 'GRNAMOUNT5' }, { name: 'SALESQTY5' },{ name: 'SALESAMOUNT5' }, 
                { name: 'BUDGETQTY5' }, { name: 'BUDGETAMOUNT5' },{ name: 'INVENTORYQTY5' },{ name: 'INVENTORYAMOUNT5' },
                { name: 'GRNQTY6' }, { name: 'GRNAMOUNT6' }, { name: 'SALESQTY6' },{ name: 'SALESAMOUNT6' }, 
                { name: 'BUDGETQTY6' }, { name: 'BUDGETAMOUNT6' },{ name: 'INVENTORYQTY6' },{ name: 'INVENTORYAMOUNT6' },
                { name: 'GRNQTY7' }, { name: 'GRNAMOUNT7' }, { name: 'SALESQTY7' },{ name: 'SALESAMOUNT7' }, 
                { name: 'BUDGETQTY7' }, { name: 'BUDGETAMOUNT7' },{ name: 'INVENTORYQTY7' },{ name: 'INVENTORYAMOUNT7' },
                { name: 'GRNQTY8' }, { name: 'GRNAMOUNT8' }, { name: 'SALESQTY8' },{ name: 'SALESAMOUNT8' }, 
                { name: 'BUDGETQTY8' }, { name: 'BUDGETAMOUNT8' },{ name: 'INVENTORYQTY8' },{ name: 'INVENTORYAMOUNT8' },
                { name: 'GRNQTY9' }, { name: 'GRNAMOUNT9' }, { name: 'SALESQTY9' },{ name: 'SALESAMOUNT9' }, 
                { name: 'BUDGETQTY9' }, { name: 'BUDGETAMOUNT9' },{ name: 'INVENTORYQTY9' },{ name: 'INVENTORYAMOUNT9' },
                { name: 'GRNQTY10' }, { name: 'GRNAMOUNT10' }, { name: 'SALESQTY10' },{ name: 'SALESAMOUNT10' }, 
                { name: 'BUDGETQTY10' }, { name: 'BUDGETAMOUNT10' },{ name: 'INVENTORYQTY10' },{ name: 'INVENTORYAMOUNT10' },
                { name: 'GRNQTY11' }, { name: 'GRNAMOUNT11' }, { name: 'SALESQTY11' },{ name: 'SALESAMOUNT11' }, 
                { name: 'BUDGETQTY11' }, { name: 'BUDGETAMOUNT11' },{ name: 'INVENTORYQTY11' },{ name: 'INVENTORYAMOUNT11' },
                { name: 'GRNQTY12' }, { name: 'GRNAMOUNT12' }, { name: 'SALESQTY12' },{ name: 'SALESAMOUNT12' }, 
                { name: 'BUDGETQTY12' }, { name: 'BUDGETAMOUNT12' },{ name: 'INVENTORYQTY12' },{ name: 'INVENTORYAMOUNT12' }
            ]
         )
        });


        var sm = new Ext.grid.CellSelectionModel({
            singleSelect: true
        });


        var cm = new Ext.grid.ColumnModel(cmItems);//添加的全局變量column

        var gridArray = new Ext.grid.EditorGridPanel({
            cm: cm,
            sm: sm,
            store: storeAccountList,
            id: 'gridArray',
            loadMask: true
        });

        var panGrid = new Ext.Panel({
            region: 'center',
            layout: 'fit',
            items: [gridArray]
        });

        var btnSearch = new Ext.Button({
            text: '搜索', //搜索
            iconCls: 'icon_search',
            handler: function() {

                //點擊搜索調用構建的方法
            }
        });

5.構建方法

            storeAccountList.removeAll(); //先將store清空
           //加載store
            storeAccountList = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({ url: '.....', method: "post", async: true }),
                reader: new Ext.data.XmlReader(
                {
                    totalProperty: 'totalRecords',
                    record: 'row'
                },
                [
                    { name: 'ITEMSERIAL' }, { name: 'ITEMSERIALNAME' }, { name: 'CPXNAME' }, { name: 'PQTY' }, { name: 'SQTY' }, { name: 'IQTY' },
                    { name: 'GRNQTY1' }, { name: 'GRNAMOUNT1' }, { name: 'SALESQTY1' },{ name: 'SALESAMOUNT1' }, 
                    { name: 'BUDGETQTY1' }, { name: 'BUDGETAMOUNT1' },{ name: 'INVENTORYQTY1' },{ name: 'INVENTORYAMOUNT1' },
                    { name: 'GRNQTY2' }, { name: 'GRNAMOUNT2' }, { name: 'SALESQTY2' },{ name: 'SALESAMOUNT2' }, 
                    { name: 'BUDGETQTY2' }, { name: 'BUDGETAMOUNT2' },{ name: 'INVENTORYQTY2' },{ name: 'INVENTORYAMOUNT2' },
                    { name: 'GRNQTY3' }, { name: 'GRNAMOUNT3' }, { name: 'SALESQTY3' },{ name: 'SALESAMOUNT3' }, 
                    { name: 'BUDGETQTY3' }, { name: 'BUDGETAMOUNT3' },{ name: 'INVENTORYQTY3' },{ name: 'INVENTORYAMOUNT3' },
                    { name: 'GRNQTY4' }, { name: 'GRNAMOUNT4' }, { name: 'SALESQTY4' },{ name: 'SALESAMOUNT4' }, 
                    { name: 'BUDGETQTY4' }, { name: 'BUDGETAMOUNT4' },{ name: 'INVENTORYQTY4' },{ name: 'INVENTORYAMOUNT4' },
                    { name: 'GRNQTY5' }, { name: 'GRNAMOUNT5' }, { name: 'SALESQTY5' },{ name: 'SALESAMOUNT5' }, 
                    { name: 'BUDGETQTY5' }, { name: 'BUDGETAMOUNT5' },{ name: 'INVENTORYQTY5' },{ name: 'INVENTORYAMOUNT5' },
                    { name: 'GRNQTY6' }, { name: 'GRNAMOUNT6' }, { name: 'SALESQTY6' },{ name: 'SALESAMOUNT6' }, 
                    { name: 'BUDGETQTY6' }, { name: 'BUDGETAMOUNT6' },{ name: 'INVENTORYQTY6' },{ name: 'INVENTORYAMOUNT6' },
                    { name: 'GRNQTY7' }, { name: 'GRNAMOUNT7' }, { name: 'SALESQTY7' },{ name: 'SALESAMOUNT7' }, 
                    { name: 'BUDGETQTY7' }, { name: 'BUDGETAMOUNT7' },{ name: 'INVENTORYQTY7' },{ name: 'INVENTORYAMOUNT7' },
                    { name: 'GRNQTY8' }, { name: 'GRNAMOUNT8' }, { name: 'SALESQTY8' },{ name: 'SALESAMOUNT8' }, 
                    { name: 'BUDGETQTY8' }, { name: 'BUDGETAMOUNT8' },{ name: 'INVENTORYQTY8' },{ name: 'INVENTORYAMOUNT8' },
                    { name: 'GRNQTY9' }, { name: 'GRNAMOUNT9' }, { name: 'SALESQTY9' },{ name: 'SALESAMOUNT9' }, 
                    { name: 'BUDGETQTY9' }, { name: 'BUDGETAMOUNT9' },{ name: 'INVENTORYQTY9' },{ name: 'INVENTORYAMOUNT9' },
                    { name: 'GRNQTY10' }, { name: 'GRNAMOUNT10' }, { name: 'SALESQTY10' },{ name: 'SALESAMOUNT10' }, 
                    { name: 'BUDGETQTY10' }, { name: 'BUDGETAMOUNT10' },{ name: 'INVENTORYQTY10' },{ name: 'INVENTORYAMOUNT10' },
                    { name: 'GRNQTY11' }, { name: 'GRNAMOUNT11' }, { name: 'SALESQTY11' },{ name: 'SALESAMOUNT11' }, 
                    { name: 'BUDGETQTY11' }, { name: 'BUDGETAMOUNT11' },{ name: 'INVENTORYQTY11' },{ name: 'INVENTORYAMOUNT11' },
                    { name: 'GRNQTY12' }, { name: 'GRNAMOUNT12' }, { name: 'SALESQTY12' },{ name: 'SALESAMOUNT12' }, 
                    { name: 'BUDGETQTY12' }, { name: 'BUDGETAMOUNT12' },{ name: 'INVENTORYQTY12' },{ name: 'INVENTORYAMOUNT12' }
                ]
                )
            });


            panGrid.removeAll(true);//將panel中的gridpanel從panel中移除

           
           //清空數組
            cmItems.clear();
            continentGroupRow.clear();
           //添加列
            cmConfig = { header: '產品線', dataIndex: 'CPXNAME', width: 120, sortable: true }
            cmItems.push(cmConfig);
            cmConfig = { header: '統馭產品', dataIndex: 'ITEMSERIAL', width: 120, sortable: true }
            cmItems.push(cmConfig);
            continentGroupRow.push({
                header: ' ',
                align: 'center',
                colspan: 2
            });
            cmConfig = { header: 'P', dataIndex: 'PQTY', width: 70, sortable: true }
            cmItems.push(cmConfig);
            cmConfig = { header: 'S', dataIndex: 'SQTY', width: 70, sortable: true }
            cmItems.push(cmConfig);
            cmConfig = { header: 'I', dataIndex: 'IQTY', width: 70, sortable: true }
            cmItems.push(cmConfig);
            continentGroupRow.push({
                header: txtYear.getValue()-1,
                align: 'center',
                colspan: 3
            });
            for (var i = 1; i <= 12; i++) {
                cmConfig = { header: 'GRN(QTY)', dataIndex: 'GRNQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'GRN(AMT)', dataIndex: 'GRNAMOUNT' + i, width: 120, sortable: true, renderer: doit }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sales Actual(QTY)', dataIndex: 'SALESQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sales Actual(AMT)', dataIndex: 'SALESAMOUNT' + i, width: 120, sortable: true, renderer: doit }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sale Budget(QTY)', dataIndex: 'BUDGETQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sale Budget(AMT)', dataIndex: 'BUDGETAMOUNT' + i, width: 120, sortable: true , renderer: doit}
                cmItems.push(cmConfig);
                cmConfig = { header: 'Inventory(QTY)', dataIndex: 'INVENTORYQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Inventory(AMT)', dataIndex: 'INVENTORYAMOUNT' + i, width: 120, sortable: true , renderer: doit}
                cmItems.push(cmConfig);
                continentGroupRow.push({
                    header: txtYear.getValue() + '-' + i,
                    align: 'center',
                    colspan: 8
                });
            }
            var tcm = new Ext.grid.ColumnModel(cmItems);
           //列頭分組
            var group = new Ext.ux.grid.ColumnHeaderGroup({
                rows: [continentGroupRow]
            });
           //從新創建GridPanel（不用申明新的gridArray 變量） 
            gridArray = new Ext.grid.EditorGridPanel({
                cm: tcm,
                sm: sm,
                autoScroll: true,
                store: storeAccountList,
                enableColumnMove: false, //不允許拖動列
                enableHdMenu: false, //隱藏下拉菜單
                id: 'gridArray',
                loadMask: true,
                plugins: group
            });
           //將創建好的GridPanel重新插入到panel中
            panGrid.insert(0, gridArray);
           //顯示
            panGrid.doLayout();
            //最后根據條件加載store
            storeAccountList.load({ params: { YEAR: txtYear.getValue(), ITEM_CLASS: cboJXClass.getValue(), MODETYPE: rdoModeType.getValue().inputValue} });