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[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 :"  &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)
	        {
		        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]
    });
	          
});