表头三层或者多层，多可以从以上扩展
//汽车使用分队车辆修理年度申请计划上报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("")});return s;}});viewConfig = {templates : {header : new Ext.Template(' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',' <thead> <tr </table>"),mhcellm : new Ext.Template( ' <td colspan="{mcolsm}" style="width:{mwidthm}px;"> <div align="center">{valuem}</div>'," </td>"),mhcell : new Ext.Template( ' <td colspan="{mcols}" style="width:{mwidth}px;"> <div align="center">{value}</div>'," </td>")}};Ext.onReady(function(){ var record=new Ext.data.Record.create([ {name:'tasksid'},//任务编号 {name:'deptname'},//车属单位 {name:'deptcoding'},//部门编号 {name:'plantime'},//计划时间 {name:'carkindsname'},//车种名 {name:'carkindsid'},//车种id {name:'motorcyclename'},//车型名 {name:'motorcycleid'},//车型id {name:'vin'},//车牌号 {name:'vehiclecode'},//车辆编号 {name:'engine'},//发动机号 {name:'framenumber'},//车架号 {name:'hasmileage'},//已行驶里程 {name:'repairmiles'},//大中修里程 {name:'equipmentdate'},//装备日期 {name:'shiyongnianxian'},//使用年限--- {name:'checktime'},//检测时间---- {name:'jiancexingshilicheng'},//检测时行驶里程---- {name:'xiajiangzhi'},//下降值--- {name:'sa1'},//sa1 {name:'l'},//L {name:'sa2'},//sa2 {name:'daxiu'},//车辆大修 {name:'zhongxiu'},//车辆中修 {name:'fadongji'},//发动机 {name:'biansuqi'},//变速器 {name:'qianqiao'},//前桥 {name:'houqiao'},//后桥 {name:'chejia'},//车架 {name:'chesheng'},//车身 {name:'zxxt'},//转向系统 {name:'zdxt'},//制动系统 {name:'dqxt'},//电气系统 {name:'xiaoxiu'}//车辆小修 ]); var myPageSize=10; var store = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : "carservice/Repairyear!RepairyearsubmitSelect.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,{ 'deptcoding':deptcoding_s, 'vin':vin_s, 'plantime':plantime_s, 'motorcycleid':motorcycleid_s, 'carkindsid':carkindsid_s }); }} }); var cm=new Ext.grid.ColumnModel([ { mtextm: " ", mtext : " ", mcol : 1, mcolm : 1, mwidth : 60, mwidthm : 60, width : 60, header : "<div align='center'>车属单位</div>" , dataIndex : "deptname" }, { mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 50, mwidth : 50, width : 50, header : "<div align='center'>车种名</div>", dataIndex : "carkindsname" }, { mtextm :" ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 50, mwidth : 50, width : 50, header : "<div align='center'>车型名</div>", dataIndex : "motorcyclename" },{ mtextm :" ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 50, mwidth : 50, width : 50, header : "<div align='center'>车牌号</div>", dataIndex : "vin" }, { mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 60, mwidth : 60, width : 60, header : "<div align='center'>发动机号</div>", dataIndex : "engine" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 50, mwidth : 50, width : 50, header : "<div align='center'>车架号</div>", dataIndex : "framenumber" }, { mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 70, mwidth : 70, width : 70, header : "<div align='center'>已行驶里程</div>", dataIndex : "hasmileage" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 80, mwidth : 80, width : 80, header : "<div align='center'>大中修里程</div>", dataIndex : "repairmiles" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 60, mwidth : 60, width : 60, header : "<div align='center'>装备时间</div>", dataIndex : "equipmentdate" },{ mtextm : " ", mtext : " ", mcolm : 1, mcol : 1, mwidthm : 60, mwidth : 60, width : 60, header : "<div align='center'>使用年限</div>", dataIndex : "shiyongnianxian" },{ mtextm :" " , mtext : "<div align='center'>轮边输出功率下降值检测记录</div>", mcolm : 3, mcol : 3, mwidthm : 300, mwidth : 300, width : 100, header : "<div align='center'>检测时间</div>", dataIndex : "jianceshijian" },{ width : 100, header : "<div align='center'>检测时行驶里程</div>", dataIndex : "jiancexingshilicheng" },{ width : 100, header : "<div align='center'>下降值</div>", dataIndex : "xiajiangzhi" },{ 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); // alert(data); Ext.Ajax.request({ url:'carservice/Repairyear!UpReport.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 unitedstore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: "carservice/Dept!DeptAll.action"}), reader: new Ext.data.JsonReader({ root: 'root' },[ {name: 'deptcoding',type:'string'}, {name: 'deptname',type:'string'} ]) }); unitedstore.load();var united=new Ext.form.ComboBox({// id:'',// name:'', hiddenName:'deptcodings', fieldLabel:'单位', triggerAction:'all', // 单击触发按钮显示全部数据 store:unitedstore, //设置数据源 displayField:'deptname', //定义要显示的字段 valueField:'deptcoding', //定义值字段 mode:'local', //本地模式 width:100, allowBlank:false, blankText:'单位必选！', forceSelection:true, //要求输入值必须在列表中存在 resizable:false, //允许改变下拉列表的大小 typeAhead:true,// 允许自动选择匹配的剩余部分文本 emptyText:'请选择', //默认选择 handleHeight:10//下拉列表中拖动手柄的高度}); 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 platenumber=new Ext.form.TextField({ id:'',name:'vin',width:100,fieldLabel:'车牌号'}); 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 czstore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: "carservice/Caikinds!CarkindsAll.action"}), reader: new Ext.data.JsonReader({ root: 'root' },[ {name: 'carkindsname',type:'string'}, {name: 'carkindsid'} ]) }); czstore.load();var czhong=new Ext.form.ComboBox({//下拉框 name:'carkindsidcz', fieldLabel:'车种', triggerAction:'all', // 单击触发按钮显示全部数据 store:czstore, //设置数据源 displayField:'carkindsname', //定义要显示的字段 valueField:'carkindsid', //定义值字段 mode:'local', //本地模式local 远程模式 remote width:100, forceSelection:true, //要求输入值必须在列表中存在 resizable:false, //允许改变下拉列表的大小 typeAhead:true,// 允许自动选择匹配的剩余部分文本 emptyText:'请选择', handleHeight:10//下拉列表中拖动手柄的高度 }); var form=new Ext.form.FormPanel({ region:'north', height:145, frame:true, items:[{ xtype: 'fieldset', layout:'column', title: '选择条件', items:[ { layout:'column', items:[{ layout: 'form', columnWidth: .33, labelWidth: 35, items: [united] },{ layout: 'form', columnWidth: .33, labelWidth: 80, items: [plantime] },{ layout: 'form', columnWidth: .33, labelWidth: 50, items: [platenumber] }] }, { layout:'column', items:[{ layout: 'form', columnWidth: .33, labelWidth: 35, items: [cxing] },{ layout: 'form', columnWidth: .33, labelWidth: 80, items: [czhong] }] }] }], buttonAlign:'left', buttons:[{text:'查 询',width:70,handler:onSelectClick}] }); var deptcoding_s,vin_s,plantime_s,motorcycleid_s,carkindsid_s; function onSelectClick() { if(!form.getForm().isValid()) { return; } deptcoding_s=''+united.getValue();vin_s= ''+platenumber.getValue();plantime_s=''+plantime.getValue();motorcycleid_s=''+cxing.getValue();carkindsid_s=''+czhong.getValue(); store.load(); } var viewport=new Ext.Viewport({ layout:'border', items:[form,grid] });});?