xrx215
xrx215

Reputation: 759

how to delete or add column in grid panel

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?

Upvotes: 7

Views: 23022

Answers (6)

KamilloPL
KamilloPL

Reputation: 34

maybe try

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

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

Upvotes: 0

Nux
Nux

Reputation: 10002

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

Upvotes: 0

Aebsubis
Aebsubis

Reputation: 1939

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/

Upvotes: 2

Andron
Andron

Reputation: 6621

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

Upvotes: 0

SBUJOLD
SBUJOLD

Reputation: 1473

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.

Upvotes: 6

Ballsacian1
Ballsacian1

Reputation: 17324

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

Upvotes: 0

Related Questions