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]