Question

Please help! I’m using ExtJs 4.1 grid panel.

I’m looking for a way to change the grid enableColumnHide property after rendering.
I reuse the same grid in a few screens with minor changes, mainly hiding some of the columns.

In one of those screens I am left only with columns which should not be hideable so I want to remove the option from the column header menu completely, but restore it when I get to one of the other screens.

Any ideas?

Answer 1

It seems that there is no obvious way to do it, but I’ve found a hack – change enableColumnHide on the headerCt and destroy header menu every time you change that value. Example code:

var checkbox = new Ext.form.field.Checkbox({
    renderTo: 'checkbox',
    boxLabel: 'enableColumnHide',
    checked: true,
    handler: function(sender, checked) {
        var h = grid.headerCt;
        h.enableColumnHide = checked;
        if (h.menu) {
            h.menu.destroy();
            h.menu = null;
        }
    }
});

It’s also posiible by using hideable on columns:

var checkbox = new Ext.form.field.Checkbox({
    renderTo: 'checkbox',
    boxLabel: 'enableColumnHide',
    checked: true,
    handler: function(sender, checked) {
        Ext.each(grid.columns, function(c){
            c.hideable = checked;
        });
    }
});

Working sample with enableColumnHide: http://jsfiddle.net/M3Aqq/5/

Working sample with hideable: http://jsfiddle.net/M3Aqq/9/