这段时间我们的项目中采用了Coolite来做富客户端，Coolite目前的版本是0.8.1，它所采用的Ext版本是2.2.1，因此下面主要是说明在这个版本下所实现的锁定列和多行表头，需要说明的是Ext在2.0版本以后就不自带锁定列功能了，只能自己实现，中国人的习惯和国外的不太一样，喜欢表格化得数据，而且形式又多种，表格最基本的功能之一，就是要锁定列和多行表头，而这两项又是Coolite和Ext所提供的组件中所没有直接包含的，虽然他们这两个框架没有提供，但依然要说的是Ext的js功能很强大， Coolite为Ext在Asp.net上的应用封装了绝大多数功能，还扩展了一部分，庞大的功能模块，非常不错，可以和官方开源封装的java版GWT2.0媲美。
看了些废话，讲入主题了，实现锁定列目前较为常见的是继承Grid，然后重写模块，实现双表格，下面的示例是采用MeDavid所实现的锁定列方式，版本为[Update 5]，Ext的代码很长就贴点主要和修正的，例子在后面有完整提供。Ext为这些控件都提供了一个模板的方式以供重写，就是重写了主模板.
1 initTemplates : function(){
2 if(!this.templates){
3 this.templates = {};
4 }
5 if(!this.templates.master){
6 this.templates.master = new Ext.Template(
7 '<div class="x-grid3" hidefocus="true">',
8 '<div class="x-grid3-locked">',
9 '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{lockedHeader}</div></div><div class="x-clear"></div></div>',
10 '<div class="x-grid3-scroller"><div class="x-grid3-body">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
11 '</div>',
12 '<div class="x-grid3-viewport">',
13 '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',
14 '<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
15 '</div>',
16 '<div class="x-grid3-resize-marker"> </div>',
17 '<div class="x-grid3-resize-proxy"> </div>',
18 '</div>'
19 );
20 }
21 Ext.grid.LockingGridView.superclass.initTemplates.call(this);
22 },
23
同时为ColumnModel增加getTotalLockedWidth方法，原有[Update 5]中的脚本中Ext.grid.LockingColumnModel要去掉。
1 Ext.grid.ColumnModel.prototype.getTotalLockedWidth=function(){
2 var totalWidth = 0;
3 for(var i = 0; i < this.config.length; i++){
4 if(this.isLocked(i) && !this.isHidden(i)){
5 totalWidth += this.getColumnWidth(i);
6 }
7 }
8 return totalWidth;
9 };
另外，版本为[Update 5]目前支持行选择模式有点BUG，就是在获得焦点时行会移动，这是因为没有重新定位造成的，在Ext.grid.LockingGridView中加入以下方法即可修正。
1 getResolvedXY : function(resolved){
2 if(!resolved){
3 return null;
4 }
5 var c = resolved.cell, r = resolved.row;
6 return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
7 },
8
多行表头分别对应有两个文件，一个是针对有锁定列的表格，一个是针对没有锁定列的表格，两个表格输出的对象是不一样的，要经过判断来输出不一样的值，至于实现的方式大家看下代码就知道了。