Disable gray background of loadMask in Sencha Touch

Question

I have a loadMask. This sets a gray background and on top of that the loading image that says Loading. From the documentation:

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

The problem is I only want the small square with the loading image and the "loading..." label, I need to get rid of the gray background.

This gray background get dawn in .x-mask x-mask-gray div. I have tried setting the CSS of this div to different values for width and height but I can't make it work.

here is the 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>

If you see, width is set to 1124px and height to 575px, I need that to disappear, make it 0px or remove the whole x-mask-gray but without removing the child nodes. And hopefully view the "Loading..." label centered.

I hope you can help me, any suggestions are greatly appreciated.

Answer 1

Your best option is to override those styles but just make the background transparent instead of trying to remove the DIV completely.

If you add the following CSS it will leave the mask's background transparent.

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

Alternatively, you could override the Ext.LoadMask's onBeforeLoad method and pass in true as the last parameter of the mask() method (which is the 'transparent' parameter) which will remove the x-mask-gray class from the masking DIV, as below:

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();

Unfortunately, you will still need the CSS override for the .x-mask class with this solution because it still adds a 30% opacity background.

Hope this helps

Stuart