softfire 发表于 2013-2-4 19:53:47

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 == 'undefined'){                                        r.data = field.defaultValue;                              }                        });                }      },      removeField: function(name){                this.recordType.prototype.fields.removeKey(name);                this.each(function(r){                        delete r.data;                });      }});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.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]
查看完整版本: Ext grid 超级强大的动态添加字段、列扩展