sencha-touch - 在 Sencha Touch 中禁用 loadMask 的灰色背景

Question

我有一个 loadMask。这会设置一个灰色背景，并在该背景之上显示正在加载的加载图像。来自 the documentation :

// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

问题是我只想要带有加载图像和“正在加载...”标签的小方 block ，我需要摆脱灰色背景。

这个灰色背景在 .x-mask x-mask-gray div 中得到黎明。我已尝试将此 div 的 CSS 设置为不同的宽度和高度值，但我无法使其工作。

这是 HTML:

<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
    <div class="x-mask-loading">
    <div class="x-loading-spinner">
        <span class="x-loading-top"></span>
        <span class="x-loading-right"></span>
        <span class="x-loading-bottom"></span>
        <span class="x-loading-left"></span>
    </div>
    <div class="x-loading-msg">Loading...</div>
    </div>
</div>

如果您看到，宽度设置为 1124px，高度设置为 575px，我需要它消失，将其设为 0px 或移除整个 x-mask-gray 但不移除子节点。并希望查看居中的“正在加载...”标签。

我希望你能帮助我，任何建议都将不胜感激。

Answer 1

您最好的选择是覆盖这些样式，但只是使背景透明，而不是尝试完全删除 DIV。

如果您添加以下 CSS，它将使 mask 的背景保持透明。

.x-mask, .x-mask.x-mask-gray
{
    background-color: transparent;
}

或者，您可以重写 Ext.LoadMask 的 onBeforeLoad 方法并传入 true 作为 mask() 方法的最后一个参数(即“透明”参数)，这将删除 x-来自掩蔽 DIV 的 mask-gray 类，如下所示:

var myMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Please wait...",
    onBeforeLoad: function(){
            if (!this.disabled) {
                this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
                this.fireEvent('show', this, this.el, this.store);
            }
        }
    });
    myMask.show();

不幸的是，您仍然需要使用此解决方案覆盖 .x-mask 类的 CSS，因为它仍然添加了 30% 的不透明度背景。

希望对你有帮助

斯图尔特