这段时间我们的项目中采用了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为这些控件都提供了一个模板的方式以供重写,就是重写了主模板.
Code
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>&l