首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext Grid 锁定列+多表头的设计与兑现(二)

2013-01-26 
Ext Grid 锁定列+多表头的设计与实现(二)上一次实现了锁定列,我是用的是Ext3.2扩展包里面的lockingGridVie

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

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

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

热点排行