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

Posted 2023-02-26

【中文标题】Extjs Grid 面板 - 渲染后更改 enableColumnHide 属性

【英文标题】：Extjs Grid panel - Change enableColumnHide property after render

【发布时间】：2012-11-15 15:10:19

【问题描述】：

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

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

在其中一个屏幕中，我只剩下不应隐藏的列，因此我想从列标题菜单中完全删除该选项，但在进入其他屏幕之一时将其恢复。

有什么想法吗？

【参考方案1】：

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

Extjs Grid panel - Hide a column with hideable=false

基本上我已经注册到网格标题菜单的“beforeshow”事件，并根据每列上的“可隐藏”属性隐藏菜单上的每个可隐藏列复选框项。

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

【参考方案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/

【讨论】：

有趣...这也适用于列上的 Hideable 属性吗？

有了 hideable 就不需要破坏菜单了。我已经更新了我的答案。

太棒了，10x 洛洛！有什么办法可以使不可隐藏的列不会出现在“列”复选框列表中？我希望用户只看到她可以在该列表中实际隐藏的列