EXTjs grid双层表头的实现 (源代码和示例).docx

源代码:加载到页面中的js文件GridDoubleHeader.js/* author * since * description 双层表头* param* mtext 表头名 * param* mcol 向后跨越子表头个数* param* mwidth 上至下第一层表头的宽度,即父表头的宽度 * class MyGridView* extends Ext.grid.GridView*/MyGridView = Ext.extend(Ext.grid.GridView, renderHeaders : function() var cm = this.cm, ts = this.templates; var ct = ts.hcell, ct2 = ts.mhcell; var cb = , sb = , p = , mcb = ; for (var i = 0, len = cm.getColumnCount(); i len; i+) p.id = cm.getColumnId(i); p.value = cm.getColumnHeader(i) | ; p.style = this.getColumnStyle(i, true); if (cm.configi.align = right) p.istyle = padding-right:16px; cbcb.length = ct.apply(p); if (cm.configi.mtext) mcbmcb.length = ct2.apply( value : cm.configi.mtext, mcols : cm.configi.mcol, mwidth : cm.configi.mwidth ); var s = ts.header.apply( cells : cb.join(), tstyle : width: + this.getTotalWidth() + ;, mergecells : mcb.join() ); return s; );viewConfig = templates : header : new Ext.Template( , mergecells + cells , ), mhcell : new Ext.Template( value, ) ;/* author * since * description 双层表头* param* mtext 表头名 * param* mcol 向后跨越子表头个数* param* mwidth 上至下第一层表头的宽度,即父表头的宽度 * class MyGridView* extends Ext.grid.GridView*/MyGridView = Ext.extend(Ext.grid.GridView, renderHeaders : function() var cm = this.cm, ts = this.templates; var ct = ts.hcell, ct2 = ts.mhcell; var cb = , sb = , p = , mcb = ; for (var i = 0, len = cm.getColumnCount(); i len; i+) p.id = cm.getColumnId(i); p.value = cm.getColumnHeader(i) | ; p.style = this.getColumnStyle(i, true); if (cm.configi.align = right) p.istyle = padding-right:16px; cbcb.length = ct.apply(p); if (cm.configi.mtext) mcbmcb.length = ct2.apply( value : cm.configi.mtext, mcols : cm.configi.mcol, mwidth : cm.configi.mwidth ); var s = ts.header.apply( cells : cb.join(), tstyle : width: + this.getTotalWidth() + ;, mergecells : mcb.join() ); return s; );viewConfig = templates : header : new Ext.Template( , mergecells + cells , ), mhcell : new Ext.Template( value, ) ;修改grid的cm配置var ldrk_cm = new Ext.grid.ColumnModel(new Ext.grid.RowNumberer(mtext : ,/ 给父表头取的名字mcol : 1,/ 包含了几列mwidth : 20,/ 子表头宽度width : 20,/ 被包含子表头的宽度,最好填写一下header : No.), mtext : 本地住址或,mcol : 1,mwidth : 190,width : 200,header : 管理单位,dataIndex : address, mtext : ,mcol : 1,mwidth : 80,width : 80,header : 姓名,sortable : true,dataIndex : name, mtext : 性,mcol : 1,mwidth : 30,width : 30,header : 别,sortable : true,dataIndex : sex, mtext : ,mcol : 1,mwidth : 80,width : 80,header : 出生年月,dataIndex : birthday, mtext : ,mcol : 1,mwidth : 80,width : 90,header : 结婚年月,dataIndex : marryDate, mtext : ,mcol : 1,mwidth : 100,width : 110,header : 流动方向,dataIndex : moveAspect, mtext : 流入人口填户籍地名流出人口填流向地名,mcol : 1,mwidth : 200,width : 200,header : 流入(出)地名,dataIndex : placename, mtext : 流入(出),mcol : 1,mwidth : 80,width : 80,header : 年月,dataIndex : moveDate, mtext : 离开或返回,mcol : 1,mwidth : 80,width : 80,header : 年月,dataIndex : comeDate, mtext : 流入(出)初期子女,mcol : 2,mwidth : 100,width : 50,header : 男,dataIndex : man, width : 50,header : 女,dataIndex : woman, mtext : 流入(出)初期避孕情况,mcol : 2,mwidth : 160,width : 80,header : 采取措施名称,dataIndex : measureName, width : 80,header : 起始年月,dataIndex : startDate, mtext : 流动人口婚育证明发验情况,mcol : 4,mwidth : 320,width : 80,header : 发证年月,dataIndex : certificateDate, width : 80,header : 查验年月,dataIndex : checkDate, width : 80,header : 查验结果,dataIndex : checkResult, width : 80,header : 证件编号,dataIndex : certificateNo);var ldrk_cm = new Ext.grid.ColumnModel(new Ext.grid.RowNumberer(mtext : ,/ 给父表头取的名字mcol : 1,/ 包含了几列mwidth : 20,/ 子表头宽度width : 20,/ 被包含子表头的宽度,最好填写一下header : No.), mtext : 本地住址或,mcol : 1,mwidth : 190,width : 200,header : 管理单位,dataIndex : address, mtext : ,mcol : 1,mwidth : 80,width : 80,header : 姓名,sortable : true,dataIndex : name, mtext : 性,mcol : 1,mwidth : 30,width : 30,header : 别,sortable : true,dataIndex : sex, mtext : ,mcol : 1,mwidth : 80,width : 80,header : 出生年月,dataIndex : birthday, mtext : ,mcol : 1,mwidth : 80,width : 90,header : 结婚年月,dataIndex : marryDate, mtext : ,mcol : 1,mwidth : 100,width : 110,header : 流动方向,dataIndex : moveAspect, mtext : 流入人口填户籍地名流出人口填流向地名,mcol : 1,mwidth : 200,width : 200,header : 流入(出)地名,dataIndex : placename, mtext : 流入(出),mcol : 1,mwidth : 80,width : 80,header : 年月,dataIndex : moveDate, mtext : 离开或返回,mcol : 1,mwidth : 80,width : 80,header : 年月,dataIndex : comeDate, mtext : 流入(出)初期子女,mcol : 2,mwidth : 100,width : 50,header : 男,dataIndex : man, width : 50,header : 女,dataIndex : woman, mtext : 流入(出)初期避孕情况,mcol : 2,mwidth : 160,width : 80,header : 采取措施名称,dataIndex : measureName, width : 80,header : 起始年月,dataIndex : startDate, mtext : 流动人口婚育证明发验情况,mcol : 4,mwidth : 320,width : 80,header : 发证年月,dataIndex : certifi