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/

你可能感兴趣的:(C++,c,ext,prototype,C#)