Ext Grid 锁定列+多表头的设计与实现（二）

上一次实现了锁定列，我是用的是Ext3.2扩展包里面的lockingGridView插件，实现起来还是很简单的。此外Grid还需要多表头，我从网上下到了几个关于多表头的插件，单独使用没有问题，但是将多表头和锁定列放到一起使用的时候就会报错。我查看了一下多表头的代码，发现了这个方法：

renderHeaders: function() {
var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';
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;
var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol);
var gs = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol);
cells[i] = ts.gcell.apply({
cls: group.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
id: id,
row: row,
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
istyle: group.align == 'right' ? 'padding-right:16px' : '',
btn: this.grid.enableHdMenu && group.header,
value: group.header || ' '
});
gcol += group.colspan;
}
headers[row] = ts.header.apply({
tstyle: tstyle,
cells: cells.join('')
});
}
headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
return headers.join('');
},

我们大致上看一下这段代码。这是重写了在Ext的headersRender方法。从方法名上就可以看出这个方法是控制表头显示的。其实Ext的Grid是由两个div组成的，至于表头，是由table构成的。只不过这个table的宽度和我们定义在columnModel中列的宽度是一致的，所以看起来像是一气呵成的一张表格。了解到这里，我们再看一下这段代码，会发现他定义了一个headers的数组，存放着每一列HTML代码，在最后直接返回的是一个拼装好的table。但是这个headers数组是一个一维数组，所以很显然他不支持多表头。

再来看一下下面这段代码：

renderHeaders: function() {
var ts = this.templates, headers = [[],[]], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';',tw = this.cm.getTotalWidth(), lw = this.cm.getTotalLockedWidth();
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;
var l = cm.isLocked(gcol)?1:0;
var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol);
var gs = Ext.ux.plugins.LockedGroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol);
cells[l][i] = ts.gcell.apply({
cls: group.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
id: id,
row: row,
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
istyle: group.align == 'right' ? 'padding-right:16px' : '',
btn: this.grid.enableHdMenu && group.header,
value: group.header || ' '
});
gcol += group.colspan;
}
headers[0][row] = ts.header.apply({
tstyle: 'width:' + (tw - lw) + 'px;',
cells: cells[0].join('')
});
headers[1][row] = ts.header.apply({
tstyle: 'width:' + lw + 'px;',
cells: cells[1].join('')
});
//alert(headers[0][row]);
//alert(headers[1][row]);

}
//headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
//var h = this.constructor.prototype.renderHeaders.apply(this, arguments);
var h = this.constructor.prototype.renderHeaders.call(this);
headers[0][headers[0].length] = h[0];
headers[1][headers[1].length] = h[1];
alert(h[0]);
alert(h[1]);
return [headers[0].join(''),headers[1].join('')];
}

其中tw和lw为定义的列宽和锁定的列宽，有了这两个值，我们可以通过样式去控制显示。具体相关的代码我也在研究之中，但是我发现lockingGridView这个组件和其他的一些组件存在冲突，或多或少的都会存在一些问题。比如与合计的插件一起使用的时候，由于合计行在移动滚动条的时候计算宽度出现问题，导致合计行不能随着列的移动而进行移动