7

grid.getcolumnModel().setHidden(0,true) will be effected for column menu and not grid panel. In column menu u can enable or disable the column. How do we add or remove the column in grid panel dynamically?

Aebsubis
  • 1,921
  • 18
  • 19
xrx215
  • 747
  • 6
  • 22
  • 38

6 Answers6

6

I think this is what you are looking for http://www.extjs.com/forum/showthread.php?53009-Adding-removing-fields-and-columns

Make sure you look at post #37 in the thread as well.

SBUJOLD
  • 1,463
  • 2
  • 11
  • 21
  • The idea is to have here the solution to the question and then a reference to look for more details... just a link... sight. – Roberto Feb 07 '13 at 15:55
2

For those who reach this question looking for a solution for Ext.js 4.2 and avobe.

I use "reconfigure" method to dynamically change the grid columns: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-method-reconfigure

Here is a nice example: http://marcusschiesser.de/2013/12/21/dynamically-changing-the-structure-of-a-grid-in-extjs-4-2/

Aebsubis
  • 1,921
  • 18
  • 19
0

In ExtJs 3.x this piece of code can help:

Note: I have used checkbox, as the first column. Please remove that line if you don't need it.

var newColModel = new Ext.grid.ColumnModel({
    columns: [
        grid.getSelectionModel(),
        {
            header: 'New column 1'
        }, {
            header: 'New column 2'
        }
    ],
    defaults: {
        sortable: false
    }
});

grid.store.reader = new Ext.data.JsonReader({
    root: 'items',
    totalProperty: 'count',
    fields: [
        // Please provide new array of fields here
    ]
});

grid.reconfigure(grid.store, newColModel);
Andron
  • 6,413
  • 4
  • 43
  • 56
0

You may have to refresh the Ext.grid.GridView in order for the column change to show.

grid.getView().refresh(true) // true to refresh HeadersToo
Ballsacian1
  • 17,214
  • 2
  • 26
  • 25
0

The reconfigure function might not work well with plugins. Especially if you have something like FilterBar.

If you only need to do this once, based on some global settings that use can use initComponent and change your initial config. Be sure to make all changes to the config before calling this.callParent();

Tested with ExtJS 6.2 (but should also work for ExtJS 4 and 5)

initComponent: function() {
    // less columns for this setting
    if (!app.Settings.dontUseFruits()) {
        var newColumns = [];
        for(var i=0; i<this.columns.items.length; i++) {
            var column = this.columns.items[i];
            // remove (don't add) columns for which `dataIndex` starts with "fruit"
            if (column.dataIndex.search(/^fruit/) < 0) {
                newColumns.push(column);
            }
        }
        this.columns.items = newColumns;
    }

    this.callParent();
Nux
  • 9,276
  • 5
  • 59
  • 72
0

maybe try

store.add(new_record); store.commitChanges();

or store.remove() and store.commitChanges()

KamilloPL
  • 34
  • 8