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这个组件和其他的一些组件存在冲突，或多或少的都会存在一些问题。比如与合计的插件一起使用的时候，由于合计行在移动滚动条的时候计算宽度出现问题，导致合计行不能随着列的移动而进行移动