Adding/removing fields and columns

[Condor]

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:

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:

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:

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

after modifying fields.

[skaue]

Thanks Condor!! Just what I needed right now

[rtconner]

!! Oh man, I had my own hack to do this, but I like your's better.

[Marshal.Lin]

very good!

[jay@moduscreate.com]

i think this should be added to the base!

[Marshal.Lin]

i think this should be added to the base!

up!

[Marshal.Lin]

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

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]

Yes, that should work.

You could also use:

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

[Radziu]

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

[Condor]

The addColumn method supports a second parameter: the column index (0-based, so use 1 when inserting the second column).

A CheckboxSelectionModel doesn't have a dataIndex, so you'll have to use the removeColumn method of the columnmodel (and not the grid) and specify the colIndex to remove.