ExtJS4 grid合并单元格-蒲公英云

ExtJS4 grid合并单元格

效果图：

Center

Ext.define(‘V5.cxb.controller.Cxb’, {

extend : ‘Ext.app.Controller’,
models : [‘V5.cxb.model.Cxb’],
stores : [],
views : [‘V5.cxb.view.Grid’],
refs : [{
ref:’Grid’,
selector:’cxbGrid’
}],

init : function() {
var me = this;

this.control({
‘button’ : {
click : me.doAction
}
});
},
doAction : function(btn) {
var me = this;
var grid = Ext.ComponentQuery.query(‘#cxb’);
var store = grid[0].getStore();
store.on(‘load’,function(){
console.log(grid[0].getView());
//合并时从右往左（行），从下往上合并（列）
span(grid,0,1,’row’,3);
span(grid,3,1,’row’,2);
span(grid,0,0,’row’,5);

});
var span = function(grid,row,col,type,num){
switch(type){
case’row’: //合并行
tds = Ext.get(grid[0].view.getNode(row)).query(‘td’);
Ext.get(tds[col]).set({rowspan:num});
Ext.get(tds[col]).setStyle({‘vertical-align’:’middle’});
for(var i = row + 1; i < row + num; i ++){
Ext.get(Ext.get(grid[0].view.getNode(i)).query(‘td’)[col]).destroy();
}break;
case ‘col’: //合并列
tds = Ext.get(grid[0].view.getNode(row)).query(‘td’);
Ext.get(tds[col]).set({colspan:num});
break;
}

}

//重新加载时触发

store.reload(1);
}
});