Ext grid 动态移除添加某一列

Because there are so much questions in the Help forum on how to add or remove a grid column I thought I'd post some utility code:

Code:

Ext.override(Ext.data.Store,{
	addField: function(field){
		field = new Ext.data.Field(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];
			if(r.modified){
				delete r.modified[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.splice(colIndex, 1);
		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);
		return 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);
		}
	}
});

Usage example:

Code:

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');

As mentioned in post #37:
Adding and removing fields currently does not update the extractors used to load data. If you want to update these too then you should call:

Code:

delete store.reader.ef;
store.reader.buildExtractors();

Originally Posted by jgarcia@tdg-i.com

i think this should be added to the base!

up!

**Marshal.Lin** · 30 Dec 2008 10:32 PM

if i want to use it like below,does it work? thanks!

Code:

var myReader = new Ext.data.JsonReader({
          id:"id",
          totalProperty: "total",
          root:"rows"                    
            }, new Ext.data.Record.create([
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
            ])
  );  
 var ds= new Ext.data.Store({
            proxy:new Ext.data.HttpProxy({url:'/getdata'}),
            reader: myReader
        });
        
    var cm = new Ext.grid.ColumnModel([       
        {header:'ID',dataIndex:'id'},
        {header:'NAME',dataIndex:'name'}       
  ]);
    
  var grid = new Ext.grid.EditorGridPanel({
        store: ds,
        cm: cm
  });

grid.addColumn({header:'AGE',dataIndex:'age'});

**Condor** · 31 Dec 2008 12:38 AM

Yes, that should work.

You could also use:

Code:

grid.addColumn({name: 'age', type: 'int', defaultValue: null}, {header: 'AGE', dataIndex: 'age', sortable: true});

**Radziu** · 15 Feb 2009 11:36 PM

is it possible to add column on the designated place? eg. we have 5 columns and i would like to add second column

hmm...and removeColumn doesnt work in checkboxselectionmodel, addColumn is ok