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

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

首先找到Ext源码包下lockingGridView.js（我会放到附件中）

这个插件的目的在于实现Grid的锁定列效果。使用起来也很简单，只需要建立一个LockingColumnModel。它继承了Ext中的ColumnModel，并且添加了几个方法用来判断该列是否被锁住、设置该列是否锁住、获取冻结列宽、获取冻结列个数、移除列方法

Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {    isLocked : function(colIndex){        return this.config[colIndex].locked === true;    },        setLocked : function(colIndex, value, suppressEvent){        if(this.isLocked(colIndex) == value){            return;        }        this.config[colIndex].locked = value;        if(!suppressEvent){            this.fireEvent('columnlockchange', this, colIndex, value);        }    },        getTotalLockedWidth : function(){        var totalWidth = 0;        for(var i = 0, len = this.config.length; i < len; i++){            if(this.isLocked(i) && !this.isHidden(i)){                totalWidth += this.getColumnWidth(i);            }        }        return totalWidth;    },        getLockedCount : function(){        for(var i = 0, len = this.config.length; i < len; i++){            if(!this.isLocked(i)){                return i;            }        }    },        moveColumn : function(oldIndex, newIndex){        if(oldIndex < newIndex && this.isLocked(oldIndex) && !this.isLocked(newIndex)){            this.setLocked(oldIndex, false, true);        }else if(oldIndex > newIndex && !this.isLocked(oldIndex) && this.isLocked(newIndex)){            this.setLocked(oldIndex, true, true);        }        Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);    }});

之后我们还需要在定义的gridPanel中去定义使用的插件

plugins:[new Ext.ux.plugins.LockedGroupHeaderGrid()]

这时，我们还需要在之前定义好的LockingColumnModel中设置冻结的列。很简单，加上locked：true就可以了

var cm = new Ext.ux.grid.LockingColumnModel({		header : 'AAA',		dataIndex : 'aaa',		locked: true	});

让我们看一下效果，应该已经成功了吧？

不能上传附件，大家要是有需要lockingGridView的可以直接从源码包里去找，或者直接找我要。我的邮箱:[email protected]

今天先写到这里，明天再写上后半段关于如何实现锁定列和多表头的整合，我也还处于研究阶段.