Threaded View

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      2  

    Default Adding/removing fields and columns

    Adding/removing fields and columns


    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();
    after modifying fields.
    Last edited by Condor; 31 Mar 2010 at 10:46 PM. Reason: Added extractor info