[2.0] mask() on document.body always scrolls to top of page

[Snape]

The following code always scrolls page to position (0, 0), which is not very convinient if user has to fix error in the bottom of the page when mask disappears (he has to scroll to bottom)

maskedElement = Ext.get(document.body);
maskedElement.mask('Processing...', 'x-mask-loading');

Expected behavior: mask appears but page does not scroll.

When testing page height must be larger than viewport height.

[brian.moeskau]

We'll look into it.

[jozzhart]

Hello,

Snape, could you please tell me what object/event do I attach the maskedElement.unmask() to with this example?

Thanks,
Joel

[Snape]

You call unmask() when you know that action is complete. How otherwise?

For example, I call mask() before ajax call and unmask() when call returns.

[Snape]

We'll look into it.

Thanks a lot!

[jozzhart]

ok, I called the unmask function from the render event on my viewport. This was what I was looking for, thanks snape

You call unmask() when you know that action is complete. How otherwise?

For example, I call mask() before ajax call and unmask() when call returns.

[RWaters]

Snape, I've started poking around with this issue and am not sure there is a way to fix it without breaking the expected functionality of the mask message. The problem is when centering the div that holds the mask message. The expected function is that this will center the message within the current viewport, but it has the drawback of scrolling the page up when centering. I'll poke around a bit more, but I'm not confident that it can be resolved without breaking the normal centering functionality.

[Snape]

I hope it can be done... This issue is really inconvinient for practical applications. I undersnad the complexity...

If it cannot be fixed without breaking existing functionality, then can new method (maskEx or mask2) be created? Or may be you can provide instructions or source code for achiving the same functionality without scrolling? This would be really great. I like mask() but scrolling problem kills its advantages over waitBox.

I really hope you can solve it in Ext!

[brian.moeskau]

The issue boils down to the fact that the class "x-masked" gets applied to the masked element, which sets overflow to hidden (no scroll bars). This is done to avoid having to monitor for scrolling and make adjustments to mask and mask message positions, which could get messy. The workaround to avoid resetting your scroll position is simple:

Ext.override(Ext.Element, {
    mask : function(msg, msgCls){
        if(this.getStyle("position") == "static"){
            this.setStyle("position", "relative");
        }
        if(this._maskMsg){
            this._maskMsg.remove();
        }
        if(this._mask){
            this._mask.remove();
        }

        this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);

        this.addClass("x-masked"); // <-- remove
        this._mask.setDisplayed(true);
        if(typeof msg == 'string'){
            this._maskMsg = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
            var mm = this._maskMsg;
            mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
            mm.dom.firstChild.innerHTML = msg;
            mm.setDisplayed(true);
            mm.center(this);
        }
        if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
            this._mask.setSize(this.dom.clientWidth, this.getHeight());
        }
        return this._mask;
    }
});

However, whether or not this works as desired in every case is doubtful, so for now, you'll have to override it yourself if you need it.

[Snape]

Brian, thanks a lot! I will try and let you know in this thread if I find any errors.

I am not experienced in ExtJS internal, so I need one small advice from you. Can I just copy/paste this code to my JS file? I do not need to modify ExtJS core, right?