Extjs Grid panel - Change enableColumnHide property after render

5
votes

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?

2
javascriptextjsgridextjs4.1

2 Answers

2
votes

i also had a similar problem before. you can check here for my workaround:

Extjs Grid panel - Hide a column with hideable=false

basically i've registered to the "beforeshow" event of the grid header menu and hide each hideable column checkbox item on the menu according to the "hideable" propery on each column.

you can do the same with "enableColumnHide" (just hide the "Columns" submenu which is only a menu item itself)

1
votes

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/