grid三层表头

myjoan

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