Ext.LoadMask 停留在加载面板的后台

Question

我尝试在用户等待显示面板时显示加载蒙版。

我使用 Ext.LoadMask 像：

loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."});

loadingMask.show();
panel = new MyPanel();
panel .show();

并在面板的渲染后

this.listeners = {
        afterrender: function () {
        loadingMask.hide();
        }
}

但没有显示加载蒙版，直到面板出现，当我关闭面板时，我看到加载蒙版。

我认为这意味着我的加载蒙版正在后台运行，所以我看不到它。

您知道这个问题有解决方案吗？我认为这似乎是一个层问题。

如何使加载蒙版显示在顶部并在面板的渲染后隐藏它？

谢谢。

Answer 1

我想你正在寻找这样的东西：

 Ext.onReady(function(){
            var loadingMask = new Ext.LoadMask(Ext.getBody(), {
                msg: "Loading..."
            });

            loadingMask.show();
            var panel = new Ext.Panel({
                renderTo: 'div1',
                width: 100,
                height: 100,
                title: 'MyPanel',
                listeners: {
                    afterrender: function(){
                        loadingMask.hide();
                    }
                }
            });         

        });

我已经包含了 renderTo 配置选项来告诉 Ext 在页面上的哪里创建面板。除了示例中的几个拼写错误之外，我认为主要问题是您的渲染后处理程序没有触发，因为您没有将其附加到面板对象。您需要将其分配为配置选项的一部分。您将渲染后处理程序分配给“this”，它很可能是示例中的顶级窗口对象。

Answer 2

这可能对您有用：

添加加载蒙版

Ext.getBody().mask('Loading...', 'x-mask-loading', false);

删除加载蒙版

Ext.getBody().unmask();

Answer 3

我把MyPanel的show函数放在delayedtask中。
然后我将 unmask 实现放在 MyPanel 的 beforedestroy 侦听器中。
我认为这个 LoadMask 应该有一些回调机制。
当我将节目放在一层之后，其他层就会变得混乱。