Add/Remove Column from Extjs4 Grid

Question

I need a function that will add/remove column from ExtJS 4 grid. Grid is written in Extjs 4. After I google it I found out following code.

function reconfigure(store, columns) {
    // debugger;
    var me = grid;

    if (me.lockable) {
        me.reconfigureLockable(store, columns);
        return;
    }

    if (columns) {
        me.headerCt.removeAll();
        me.headerCt.add(columns);
    }

    if (store) {
        store = Ext.StoreManager.lookup(store);
        me.bindStore(store);
        //  me.getView().refresh();
    } else {
        me.getView().refresh();
    }
}

This code that I am calling to this function

var store = grid.getStore();
reconfigure(store, fields);

It's replace the headers rows but will not refresh the data. I am using ExtJs 4.0

Solution 1

I solved this problem and I saved all displayed columns in array. Than I have a function that updates the grid

function ShowHideColumns(settingsColumn) {
    var gridColumns = grid.columns;
    var len = gridColumns.length;
    for (var j = 0; j < len; j++) {
        var gridColumn = gridColumns[j];
        for (var i = 0; i < settingsColumn.length; i++) {
            var columnSetting = settingsColumn[i];
            if (gridColumn.text == columnSetting.gridName) {
                if (columnSetting.isActive && gridColumn.hidden)
                    gridColumn.show();
                else if (!gridColumn.hidden && !columnSetting.isActive)
                    gridColumn.hide();
                break;
            }
        }
    }
}

See below settingColumn schema. settingsColumn is array that holds settingColumn items. Each item describes column information in the grid.

[DataContract]
[System.SerializableAttribute()]
public partial class SettingsSettingColumn
{


    [System.Xml.Serialization.XmlAttributeAttribute()]
    [DataMember]
    public string name { get; set; }

    [System.Xml.Serialization.XmlAttributeAttribute()]
    [DataMember]
    public string gridName { get; set; }

    [System.Xml.Serialization.XmlAttributeAttribute()]
    [DataMember]
    public string type { get; set; }

    [System.Xml.Serialization.XmlAttributeAttribute()]
    [DataMember]
    public bool isActive { get; set; }

    [System.Xml.Serialization.XmlAttributeAttribute()]
    [DataMember]
    public float width { get; set; }


}

Solution 2

create function

GetProductsGetStore: function(fiels) {    
    var ret = Ext.create('Ext.data.Store', {
        autoLoad: false,
        proxy: {
            type: 'ajax',
            url: '/index.php/ajax/ProductsGet',
            reader: {
                type: 'json'
            },
            extraParams: {
                currency: '0'
            }
        },
        fields: fiels
    });

    return ret;
}

and gridpanel without store

this.Product = Ext.create('Ext.grid.Panel', {
    width: '100%',
    height: 154,
    border: 0,
    multiSelect: true,
    allowDeselect: true,
    columns: [
        {
            text: 'article',
            dataIndex: 'article',
            flex: 2
        },
        {
            text: 'name',
            dataIndex: 'name',
            flex: 2
        },
        {
            text: 'price',
            dataIndex: 'price',
            flex: 1
        }
    ]
});

dynamic edit grid

var fields = [
    'id',
    'name',
    'checked',
    'price',
    'currency',
    'src'
];
this.Product.reconfigure(th.GetProductsGetStore(fields));
this.Product.store.load();

Comments

[bensiu]

why you just configure all 'bucket' of columns, and problematically show and hide them when needed ? Option when you remove All and add new set is almost like destroy whole grid and create new one...

[Gregory Nozik]

I tried that but it's working very slow

[JamesHalsall]

shouldn't you be passing the grid into the reconfigure function? a globally scoped variable is a bad idea

[Molecular Man]

Have you tried built-in grid.reconfigure method?

[Gregory Nozik]

I tried reconfigure as well . The data is not rendered . But columns are changed.

[Vitali Pom]

I think it just should be insert. headerCT.insert().....