extjs - 将负载蒙版应用到也覆盖浮动组件的视口

Question

如何在 Ext.applcation 的启动方法中将加载掩码添加到视口中，该视口在显示时也将覆盖窗口等浮动组件？

目前，面具工作但不覆盖任何打开的窗口。

Answer 1

我在这里找到了答案，诀窍是增加掩码的 z 顺序：

Ext.getBody().mask().dom.style.zIndex = '99999';

我做了一个测试，它对我有用。

Answer 2

我更喜欢我的 CSS 解决方案：

body.x-masked .x-mask {
    z-index: 20000;
}

由于窗口 z-index 是 19001，所以 20000 还不错。

Answer 3

您可以创建自定义加载器，它会在加载所有内容时隐藏自己...

1.在正文中创建html持有者：

<div id="loading-mask"></div>
<div id="loading">
   <span id="loading-message">Loading. Please wait...</span>
</div>

2.添加css以正确定位掩码：

#loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 1;
}
#loading {
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 2;
    font-family: tahoma,arial,verdana,sans-serif;
    font-size: 12px;
}
#loading span {
    padding: 5px 30px;
    display: block;
}

3.在Ext.onReady调用外创建js函数：

function hidePreloader() {
    var loadingMask = Ext.get('loading-mask');
    var loading = Ext.get('loading');

    //  Hide loading message            
    loading.fadeOut({ duration: 0.2, remove: true });

    //  Hide loading mask
    loadingMask.setOpacity(0.9);
    loadingMask.shift({
        xy: loading.getXY(),
        width: loading.getWidth(),
        height: loading.getHeight(),
        remove: true,
        duration: 1,
        opacity: 0.1,
        easing: 'bounceOut'
    });
 }

4.当所有组件和任务都完成并准备好时调用 hidePreloader 方法，在您的情况下，在 app.js 启动方法完成加载后，例如：

listeners: {
    afterrender: function(form) {
        hidePreloader();
    }
}

这是小提琴中的一个例子。