extjs 构建gridpanel多表头

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

//主面板
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]
}
]
});

//定义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() {

//点击搜索调用构建的方法
}
});

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} });