extjs3合併表頭 rowspan

extjs3的表頭合併，雖然有ColumnHeaderGroup控件，但是這個控件無法實現合併行rowspan，顯示太醜，爲此只能自己去改extjs的源碼，先上效果

grid中增加屬性rows，rows的內容爲

{header: ‘列名’,align: 'center',2: colspan,rowspan:1}組成的數組

 var cm = new Ext.grid.ColumnModel([
	{
		header : 'xx',
		sortable : false,
		dataIndex : 'V1'
	},{
		header : 'xx',
		sortable : false,
		dataIndex : 'V2'
	},{
		header : 'xx',
		sortable : false,
		dataIndex : 'V3'
	},{
		header : 'qq',
		sortable : false,
		hidden:true,
		dataIndex : 'V4'
	} ]);
	cm.rows=[[{header: '測試1',align: 'center',colspan: 2,rowspan:1},{header: '測試2',align: 'center',colspan: 2,rowspan:1}],
						      [{header: '測試3',align: 'center',colspan: 1,rowspan:2},{header: '測試4',align: 'center',colspan: 1,rowspan:1},
						       {header: '測試5',align: 'center',colspan: 1,rowspan:1},{header: '測試6',align: 'center',colspan: 1,rowspan:1}]];
	
		  var grid=new Ext.grid.GridPanel({
					   renderTo : 'content', 
						autoScroll : true ,
						loadMask : {
							msg : '正在加載數據，請稍侯……',
							removeMask: true
						}, 
						stripeRows : false,//不需要隔行換色
						store : store,
						height : 500,
						frame : true,
						clicksToEdit : 2,
						cm : cm, 
						trackMouseOver : true,
						disableSelection : true, 
						viewConfig : {
						forceFit : false
						}  
						  
					});

1、首先在extjs-all-debug.js中找到renderHeaders方法進行改寫

renderHeaders : function() {
        var cm   = this.cm,
            ts   = this.templates,
            ct   = ts.hcell,
            cb   = [],
            p    = {},
            len  = cm.getColumnCount(),
            rows = this.cm.rows,
            last = len - 1;
 
        /** add by wly 20160722**/
        var cellHead="";
        var colgroup='';
        if(rows !=undefined){
        	colgroup='<colgroup>';
	        for(var row = 0, rlen = rows.length;  row < rlen;row++){
	            var r = rows[row], cells = [];
 	            for(var i = 0, gcol = 0, len = r.length; i < len; i++){
	                var group = r[i];
	                group.colspan = group.colspan || 1;
 
	                p.id = 0;
                    p.value = group.header || '';  
                    p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                    p.css=p.css+' ux-grid-hd-group-row-'+id+' ux-grid-hd-group-cell ';
                    p.colspan=group.colspan;
                    p.rowspan=group.rowspan;
                    if(p.colspan==0) p.colspan=1;
                   
                    cells[i] = ct.apply(p);
            
	                 
	                gcol += group.colspan;
	            }
	            
	            cellHead=cellHead+'<tr class="x-grid3-hd-row">'+cells.join('')+'</tr>';
	        }
        }
        
        /** add by wly 20160722**/
        
        for (var i = 0; i < len; i++) {
        	colgroup=colgroup+' <col width="'+this.getColumnWidth(i).replace('px','')+'"></col>';   /** add by wly 20160722**/
        	
        
        	 
            p.id = cm.getColumnId(i);
            p.value = cm.getColumnHeader(i) || '';
            p.style = this.getColumnStyle(i, true);
            p.tooltip = this.getColumnTooltip(i);
            p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');

            if (cm.config[i].align == 'right') {
                p.istyle = 'padding-right:16px';
            } else {
                delete p.istyle;
            }
            
            	cb[cb.length] = ct.apply(p);
             
        }
 
        if(rows !=undefined){
        	return ts.header.apply({colgroup:colgroup,cells:cellHead+'<tr class="x-grid3-hd-row">'+cb.join('')+'</tr>', tstyle:'width:'+this.getTotalWidth()+';'});

        }else{
        	return ts.header.apply({colgroup:'',cells: '<tr class="x-grid3-hd-row">'+cb.join('')+'</tr>', tstyle:'width:'+this.getTotalWidth()+';'});

        }
         
        
    },

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">2、找到header模板，進行修改</span>

if(!ts.header){
            ts.header = new Ext.Template(
                '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
//                '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
                '{colgroup}<thead>{cells}</thead>', //modify by wly 20160722
                '</table>'
            );
        }

3、修改列拖動方法找updateColumnWidth方法，增加getColGroup方法調用和設置寬度

updateColumnWidth : function(col, width){
        var w = this.getColumnWidth(col);
        var tw = this.getTotalWidth();
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;
        var hd = this.getHeaderCell(col);
        hd.style.width = w;
        
        /** add my wly 20160722 mutihead**/
        var colgroup=this.getColgroup(col);
        if(colgroup !=undefined)  colgroup.style.width=w;

        var ns = this.getRows(), row;
        for(var i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                row.firstChild.rows[0].childNodes[col].style.width = w;
            }
        }

        this.onColumnWidthUpdated(col, w, tw);
    },

找到getHeaderCell方法，在下面增加方法

getColgroup : function(index){ 
    	/** add by wly 20160722**/ 
    	 return this.mainHd.dom.getElementsByTagName('col')[index];
    },

注意引入ColumnHeaderGroup.css

完整代碼上傳審批沒通過，現已上傳百度網盤 http://pan.baidu.com/s/1bO9NQI