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