ExtJS在执行操作时遮罩面板

Question

我有一个从我的视口中扩展的西面面板，我有一个按钮处理程序，首先删除所有元素，然后添加另一个元素，然后执行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();

这可行吗？如果有需要，我可以提供更多信息。谢谢。

- Manny Calavera

Answer 1

你只需要在代码块前后使用mask()和unmask()。如果你的代码中有异步执行的内容，那么你需要确保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()方法。

- Brian Moeskau