grid三层表头
MyGridView = Ext.extend(Ext.grid.GridView, {renderHeaders : function() {var cm = this.cm, ts = this.templates;var ct = ts.hcell, ct2 = ts.mhcell,ctm=ts.mhcellm;var cb = [], sb = [], p = {}, mcb = [],mcbm=[];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.config.align == 'right') {p.istyle = 'padding-right:16px';}cb = ct.apply(p); if (cm.config.mtext)mcb = ct2.apply({value : cm.config.mtext,mcols : cm.config.mcol,mwidth : cm.config.mwidth}); if (cm.config.mtext)mcbm = ctm.apply({valuem : cm.config.mtextm,mcolsm : cm.config.mcolm,mwidthm : cm.config.mwidthm});}var s = ts.header.apply({cells : cb.join(""),//显示字段tstyle : 'width:' + this.getTotalWidth() + ';',mergecells : mcb.join("")//, // mergecellsm : mcbm.join("")}); var ss = ts.headerm.apply({//cells : cb.join(""),//显示字段tstyle : 'width:' + this.getTotalWidth() + ';',//mergecells : mcb.join(""), mergecellsm : mcbm.join("")});return ss+s;}});viewConfig = {templates : {headerm : new Ext.Template(' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',' <thead> <tr class="x-grid3-hd-row">{mergecellsm} </tr>'+ '</thead>'," </table>"),header : new Ext.Template(' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',' <thead> <tr class="x-grid3-hd-row">{mergecells} </tr>'+ ' <tr class="x-grid3-hd-row">{cells} </tr> </thead>'," </table>"),mhcellm : new Ext.Template( ' <td class="x-grid3-header" colspan="{mcolsm}" style="width:{mwidthm}px;"> <div align="center">{valuem}</div>'," </td>"),mhcell : new Ext.Template( ' <td class="x-grid3-header" colspan="{mcols}" style="width:{mwidth}px;"> <div align="center">{value}</div>'," </td>")}};Ext.onReady(function(){var record=new Ext.data.Record.create([ {name:'deptcoding'},//部门编号 {name:'plantime'},//计划时间 {name:'motorcyclename'},//车型名 {name:'motorcycleid'},//车型id {name:'vehiclecode'},//车辆编号 {name:'daxiu'},//车辆大修 {name:'zhongxiu'},//车辆中修 {name:'fadongji'},//发动机 {name:'qita'}, {name:'xiaoxiu'},//车辆小修 {name:'daxiua'},//车辆大修 {name:'zhongxiua'},//车辆中修 {name:'fadongjia'},//发动机 {name:'qitaa'}, {name:'xiaoxiua'}//车辆小修 ]); var myPageSize=10; var store = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : "carservice/!.action"//路径}),reader : new Ext.data.JsonReader({totalProperty : 'totalProperty',//一共有totalPrpperty条数据root : 'root'//存储后台数据}, record),baseParams : {start : 0,limit : myPageSize}, listeners:{beforeload: function(store,options ) { Ext.apply(store.baseParams,{ }); }} }); var cm=new Ext.grid.ColumnModel([ { mtextm :"&nbsp;", mtext : " &nbsp; ", mcolm : 1, mcol : 1, mwidthm : 50, mwidth : 50, width : 50, header : "<div align='center'>车型名</div>", dataIndex : "motorcyclename" },{ mtextm :"年度修理任务（辆）" , mtext : "&nbsp;", mcolm : 5, mcol : 1, mwidthm : 250, mwidth : 50, width : 50, header : "<div align='center'>车辆大修</div>", dataIndex : "daxiu" },{ mtext : "&nbsp;", mcol : 1, mwidth : 50, width : 50, header : "<div align='center'>车辆中修</div>", dataIndex : "zhongxiu" },{ mtext : "总成", mcol : 2, mwidth : 100, width : 50, header : "<div align='center'>发动机</div>", dataIndex : "fadongji" },{ width : 50, header : "<div align='center'>其它</div>", dataIndex : "qita" },{ mtext : "&nbsp;", mcol : 1, mwidth : 50, width : 50, header : "<div align='center'>车辆小修</div>", dataIndex : "xiaoxiu" },{ mtextm : "&nbsp;", mtext : " &nbsp; ", mcolm : 1, mcol : 1, mwidthm : 150, mwidth : 150, width : 150, header : "<div align='center'>车辆总行驶里程<br />sa1（公里）</div>", dataIndex : "sa1" },{ mtextm : " &nbsp; ", mtext : " &nbsp; ", mcolm : 1, mcol : 1, mwidthm : 100, mwidth : 100, width : 100, header : "<div align='center'>下年度车公里<br />保障预算L</div>", dataIndex : "l" },{ mtextm : " &nbsp; ", mtext : " &nbsp; ", mcolm : 1, mcol : 1, mwidthm : 130, mwidth : 130, width : 130, header : "<div align='center'>下年度车辆总行驶里程<br />预算SA2（公里）</div>", dataIndex : "sa2" },{ mtextm : "下年度车辆修理需求预算（台次）", mtext : " &nbsp; ", mcolm : 12, mcol : 1, mwidthm : 960, mwidth : 80, width : 80, header : "<div align='center'>车辆大修</div>", dataIndex : "daxiu" },{ mtext : " &nbsp;", mcol : 1, mwidth : 80, width : 80, header : "<div align='center'>车辆中修</div>", dataIndex : "zhongxiu" }, { mtext : "总成", mcol : 9, mwidth : 720, width : 80, header : "<div align='center'>发动机</div>", dataIndex : "fadongji" },{ width : 80, header : "<div align='center'>变速器</div>", dataIndex : "biansuqi" },{ width : 80, header : "<div align='center'>前桥</div>", dataIndex : "qianqiao" },{ width : 80, header : "<div align='center'>后桥</div>", dataIndex : "houqiao" },{ width : 80, header : "<div align='center'>车架</div>", dataIndex : "chejia" },{ width : 80, header : "<div align='center'>车身</div>", dataIndex : "chesheng" },{ width : 80, header : "<div align='center'>转向系统</div>", dataIndex : "zxxt" },{ width : 80, header : "<div align='center'>制动系统</div>", dataIndex : "zdxt" },{ width : 80, header : "<div align='center'>电气系统</div>", dataIndex : "dqxt" },{ mtext : " &nbsp;", mcol : 1, mwidth : 80, width : 80, header : "<div align='center'>车辆小修</div>", dataIndex : "xiaoxiu" } ]); var grid = new Ext.grid.GridPanel({ region:'center', frame:true, title:"车辆维修年度任务", loadMask:true, autoWidth:true, viewConfig:{ forceFit:true }, height:500, cm:cm, store:store, view:new MyGridView(viewConfig), bbar:new Ext.PagingToolbar({pageSize:myPageSize,store:store,displayInfo:true,displayMsg:'显示第{0}条到{1}条记录，一共{2}条',emptyMsg:"没有记录"}),buttonAlign:'left',buttons:[{text:'上报',handler:onReport}] }); function onReport() { var record=grid.getStore().getAt(0); var jsonArray = []; if(record==null) { Ext.Msg.alert('提示','无信息上报！'); return; }jsonArray.push(record.data); data=Ext.encode(jsonArray); Ext.Ajax.request({ url:'carservice/!.action', params:'json='+data, customer:'字定义属性', method:'post', callback:function(options,success,response) { varbo=response.responseText; if(success) { Ext.Msg.alert('提示',bo); }else { Ext.Msg.alert('错误',"请联系管理员!"); } } }); }; //查询 var ptstore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: "carservice/Plan!Yeararray.action"}), reader: new Ext.data.JsonReader({ root: 'root' },[ {name: 'timedisplay'}, {name: 'timevalue'} ]) }); // ptstore.load(); var plantime=new Ext.form.ComboBox({//下拉框 fieldLabel:'计划时间', triggerAction:'all', //单击触发按钮显示全部数据 store:ptstore, //设置数据源 displayField:'timedisplay', //定义要显示的字段 valueField:'timevalue', //定义值字段 mode:'local', //本地模式 width:100, allowBlank:false, blankText:'计划时间必选！', forceSelection:true, //要求输入值必须在列表中存在 resizable:false,//允许改变下拉列表的大小 typeAhead:true,//允许自动选择匹配的剩余部分文本 emptyText:'请选择', handleHeight:10//下拉列表中拖动手柄的高度 }); var cxstore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: "carservice/Motorcycle!MotorcycleAll.action"}), reader: new Ext.data.JsonReader({ root: 'root' },[ {name: 'motorcyclename',type:'string'}, {name: 'motorcycleid',type:'string'} ]) }); // cxstore.load();var cxing=new Ext.form.ComboBox({//下拉框 fieldLabel:'车型', triggerAction:'all', //单击触发按钮显示全部数据 store:cxstore, //设置数据源 displayField:'motorcyclename', //定义要显示的字段 valueField:'motorcycleid', //定义值字段 mode:'local', //本地模式 width:100, forceSelection:true, //要求输入值必须在列表中存在 resizable:false,//允许改变下拉列表的大小 typeAhead:true,//允许自动选择匹配的剩余部分文本 emptyText:'请选择', handleHeight:10//下拉列表中拖动手柄的高度 }); var form=new Ext.form.FormPanel({ region:'north', height:145, labelAlign:'right', frame:true, items:[{ xtype: 'fieldset', layout:'column', title: '选择条件', items:[ { layout:'column', items:[{ layout: 'form', columnWidth: .50, labelWidth: 80, items: },{ layout: 'form', columnWidth: .50, labelWidth: 50, items: }] }] }], buttonAlign:'left', buttons:[{text:'查 询',width:70,handler:onSelectClick},{text:'重 置',width:70,handler:function(){form.getForm().reset();}}] }); var plantime_s,motorcycleid_s; function onSelectClick() { if(!form.getForm().isValid()) { return; }plantime_s=''+plantime.getValue();motorcycleid_s=''+cxing.getValue(); store.load(); } var viewport=new Ext.Viewport({ layout:'border', items: }); });
页:
[1]