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[i].align == 'right') { p.istyle = 'padding-right:16px'; } cb[cb.length] = ct.apply(p); if (cm.config[i].mtext) mcb[mcb.length] = ct2.apply({ value : cm.config[i].mtext, mcols : cm.config[i].mcol, mwidth : cm.config[i].mwidth }); if (cm.config[i].mtext) mcbm[mcbm.length] = ctm.apply({ valuem : cm.config[i].mtextm, mcolsm : cm.config[i].mcolm, mwidthm : cm.config[i].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 :" ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 50, mwidth : 50, width : 50, header : "<div align='center'>车型名</div>", dataIndex : "motorcyclename" },{ mtextm :"年度修理任务(辆)" , mtext : " ", mcolm : 5, mcol : 1, mwidthm : 250, mwidth : 50, width : 50, header : "<div align='center'>车辆大修</div>", dataIndex : "daxiu" },{ mtext : " ", 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 : " ", mcol : 1, mwidth : 50, width : 50, header : "<div align='center'>车辆小修</div>", dataIndex : "xiaoxiu" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 150, mwidth : 150, width : 150, header : "<div align='center'>车辆总行驶里程<br />sa1(公里)</div>", dataIndex : "sa1" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 100, mwidth : 100, width : 100, header : "<div align='center'>下年度车公里<br />保障预算L</div>", dataIndex : "l" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 130, mwidth : 130, width : 130, header : "<div align='center'>下年度车辆总行驶里程<br />预算SA2(公里)</div>", dataIndex : "sa2" },{ mtextm : "下年度车辆修理需求预算(台次)", mtext : " ", mcolm : 12, mcol : 1, mwidthm : 960, mwidth : 80, width : 80, header : "<div align='center'>车辆大修</div>", dataIndex : "daxiu" },{ mtext : " ", 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 : " ", 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) { var bo=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: [plantime] },{ layout: 'form', columnWidth: .50, labelWidth: 50, items: [cxing] }] }] }], 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:[form,grid] }); });