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

时间:2011-06-30 21:53:40

标签: sencha-touch loader

我有一个loadMask。这将设置灰色背景,并在其上方显示正在加载的加载图像。来自the documentation

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

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

这个灰色背景在.x-mask x-mask-grey 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-grey但不删除子节点。并希望以“Loading ...”标签为中心。

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

1 个答案:

答案 0 :(得分:4)

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

如果添加以下CSS,则会使蒙版的背景保持透明。

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

或者,你可以覆盖Ext.LoadMask的 onBeforeLoad 方法并传入true作为mask()方法的最后一个参数(这是'transparent'参数),它将删除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%的不透明度背景。

希望这有帮助

斯图尔特