Hybrid View

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 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

  2. #2
    Ext User skaue's Avatar
    Join Date
    Sep 2008
    Location
    Troms
    Posts
    191
    Vote Rating
    0
    skaue is on a distinguished road

      0  

    Default


    Thanks Condor!! Just what I needed right now
    Webdeveloper from Norway

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    63
    Vote Rating
    0
    rtconner is on a distinguished road

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    1
    Marshal.Lin is on a distinguished road

      0  

    Default


    very good!

  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      1  

    Default


    i think this should be added to the base!

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    1
    Marshal.Lin is on a distinguished road

      1  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    i think this should be added to the base!
    up!

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    8
    Vote Rating
    1
    Marshal.Lin is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    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 Condor has much to be proud of

      0  

    Default


    Yes, that should work.

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

  9. #9
    Ext User
    Join Date
    Dec 2007
    Posts
    214
    Vote Rating
    0
    Radziu is an unknown quantity at this point

      0  

    Default


    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

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,557
    Vote Rating
    383
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    i think this should be added to the base!
    +1
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM