Extjs网格面板 - 渲染后更改enableColumnHide属性

Question

请帮忙！我正在使用 ExtJs 4.1 的网格面板。

我正在寻找一种方法，在渲染后更改网格的 enableColumnHide 属性。我在几个屏幕中重复使用同一个网格，只是进行了一些小的更改，主要是隐藏了一些列。

在其中一个屏幕上，我只剩下了不应该被隐藏的列，因此我想完全从列标题菜单中删除此选项，但当我到达其他屏幕时，要恢复它。

有什么建议吗？

- Nir Rozenblum

Answer 1

我之前也遇到过类似的问题。 你可以在这里查看我的解决方法：

Extjs Grid panel - Hide a column with hideable=false

基本上，我在网格表头菜单的“beforeshow”事件中注册，并根据每列的“hideable”属性隐藏菜单中的每个可隐藏列复选框项。

你可以使用“enableColumnHide”做同样的事情（只需隐藏“Columns”子菜单，它本身只是一个菜单项）。

- danfromisrael

Answer 2

看起来似乎没有明显的方法可以做到这一点，但我找到了一个技巧 - 在headerCt上更改enableColumnHide并在每次更改该值时销毁标题菜单。示例代码：

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

还可以通过在列上使用可隐藏来实现：

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

带有enableColumnHide的工作示例：http://jsfiddle.net/M3Aqq/5/

带有hideable的工作示例：http://jsfiddle.net/M3Aqq/9/

- Krzysztof

---

有趣...这对列的 Hideable 属性也适用吗？ - danfromisrael

使用hideable，无需销毁菜单。我已更新我的答案。 - Krzysztof

太棒了，非常感谢！有没有办法让那些不可隐藏的列不出现在“列”复选框列表中？我希望用户只能在该列表中看到她实际上可以隐藏的列。 - Nir Rozenblum