在进行操作时使用ExtJS掩码面板

Question

我的视口中有一个Ext west面板,我在一个按钮上有一个处理程序,它首先从西方删除所有元素然后再广告另一个元素,然后执行doLayout().所以这个功能在点击按钮时有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();

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

Answer 1

你只需要在代码块之前和之后执行mask()然后取消屏蔽().如果代码中的某些内容异步执行,那么您只需确保在适当的回调中完成取消屏蔽.举个例子:

    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().