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

Posted 2023-02-26

【中文标题】在 Sencha Touch 中禁用 loadMask 的灰色背景

【英文标题】：Disable gray background of loadMask in Sencha Touch

【发布时间】：2011-06-30 21:53:39

【问题描述】：

我有一个负载掩码。这将设置一个灰色背景，并在其顶部显示加载中的加载图像。来自the documentation：

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

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

这个灰色背景在 .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>

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

希望你能帮助我，任何建议都非常感谢。

【参考方案1】：

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

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

.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% 的不透明度背景。

希望对你有帮助

斯图尔特