进行操作时的 ExtJS 掩码面板答案

【问题标题】：ExtJS mask panel while actions are made进行操作时的 ExtJS 掩码面板
【发布时间】：2010-11-29 03:08:40
【问题描述】：

我的视口中有一个 Ext west 面板，我在一个按钮上有一个处理程序，它首先从 west 中删除所有元素，然后添加另一个元素，然后执行 doLayout()。所以这个函数在点击按钮时做了 3 件事。我想在单击按钮时向西面板添加一个遮罩，并在完成所有 3 个任务后取消遮罩。

这是面板：

{
                region: 'west',
                id: 'west-panel',
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: 'fit'
                items: [leftMenu]
            }

这就是我执行任务的方式：

west.removeAll();
west.add(indexHeaderPanel);
west.doLayout();

这可能吗？如果被问到，我会提供更多信息。谢谢。

【问题讨论】：

标签： extjs panel mask

【解决方案1】：

您实际上只是在代码块之前和之后执行 mask() 然后 unmask() 。如果您的代码中的某些内容异步执行，那么您只需确保在适当的回调中完成取消屏蔽。举个例子：

    buttons: [{
        text: 'Refresh West Panel',
        handler: function(){
            var w = Ext.getCmp('west-panel');
            w.getEl().mask();
            w.removeAll();
            w.add(indexHeaderPanel); // assuming you have this ref!
            w.doLayout();
            w.getEl().unmask();
        }
    }]

如果您的逻辑执行得足够快，您将永远看不到掩码。要验证它是否有效，您可以进行测试延迟：

    buttons: [{
        text: 'Foo',
        handler: function(){
            var w = Ext.getCmp('west-panel');
            w.getEl().mask();

            // do whatever

            (function(){
                w.getEl().unmask();
            }).defer(1000, this);
        }
    }]

w.getEl().[un]mask() 将屏蔽整个面板（包括页眉/页脚）。要仅屏蔽内容，请执行 w.body.[un]mask().

【讨论】：