Ext grid 超级强大的动态添加字段、列扩展

最近一直在学习ext逛我喜欢的 ext中文社区，看到论坛里面有很多人问：如何动态添加或者删除一个grid的列的帖子，于是搞了个扩展，大家看看，我认为不错啊！

Ext.override(Ext.data.Store,{
        addField: function(field){
                if(typeof field == 'string'){
                        field = {name: field};
                }
                this.recordType.prototype.fields.replace(field);
                if(typeof field.defaultValue != 'undefined'){
                        this.each(function(r){
                                if(typeof r.data[field.name] == 'undefined'){
                                        r.data[field.name] = field.defaultValue;
                                }
                        });
                }
        },
        removeField: function(name){
                this.recordType.prototype.fields.removeKey(name);
                this.each(function(r){
                        delete r.data[name];
                });
        }
});
Ext.override(Ext.grid.ColumnModel,{
        addColumn: function(column, colIndex){
                if(typeof column == 'string'){
                        column = {header: column, dataIndex: column};
                }
                var config = this.config;
                this.config = [];
                if(typeof colIndex == 'number'){
                        config.splice(colIndex, 0, column);
                }else{
                        colIndex = config.push(column);
                }
                this.setConfig(config);
                return colIndex;
        },
        removeColumn: function(colIndex){
                var config = this.config;
                this.config = [config[colIndex]];
                config.remove(colIndex);
                this.setConfig(config);
        }
});
Ext.override(Ext.grid.GridPanel,{
        addColumn: function(field, column, colIndex){
                if(!column){
                        if(field.dataIndex){
                                column = field;
                                field = field.dataIndex;
                        } else{
                                column = field.name || field;
                        }
                }
                this.store.addField(field);
                this.colModel.addColumn(column, colIndex);
        },
        removeColumn: function(name, colIndex){
                this.store.removeField(name);
                if(typeof colIndex != 'number'){
                        colIndex = this.colModel.findColumnIndex(name);
                }
                if(colIndex >= 0){
                        this.colModel.removeColumn(colIndex);
                }
        }
});

使用方法：

var grid = new Ext.grid.GridPanel({
        store: new Ext.data.SimpleStore({
                fields: ['A', 'B'],
                data: [['ABC', 'DEF'], ['GHI', 'JKL']]
        }),
        columns: [
                {header: 'A', dataIndex: 'A'},
                {header: 'B', dataIndex: 'B'}
        ]
});
new Ext.Viewport({
        layout: 'fit',
        items: grid
});
grid.addColumn('C');
grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});
grid.removeColumn('B');

该文章首发：http://www.17ext.com/showtopic-1759.aspx,把代码赋值了直接运行的噢！

grid.addColumn('C');  //添加C列，空数据
grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});//添加D列，有D数据
grid.removeColumn('B');//把之前的B列删除

再次顶下 http://www.17ext.com/

评论

1 楼 manliness 2011-09-15  

不错，学习，楼主可以做的更加完善