View Full Version : load mask for body

Mar 12, 2009, 10:03 AM
var myMask = new Ext.LoadMask(Ext.getBody(), {msg: message});

is this suppose to mask the whole page? because the mask (overlay which prevents user from interacting with page) is not showing, but the message is showing, please help, thanks

Mar 12, 2009, 10:08 AM
just noticed something, your server time is advanced by an hour :-)

Mar 12, 2009, 10:15 AM

This code using by AjaxEvent to mask whole page

var theHeight = "100%";
if (window.innerHeight) {
    theHeight = window.innerHeight + "px";
ese if (document.documentElement && document.documentElement.clientHeight) {
      theHeight = document.documentElement.clientHeight + "px";
else if (document.body) {
       theHeight = document.body.clientHeight + "px";

var el = Ext.getBody().createChild({ style: "position:absolute;left:0;top:0;width:100%;height:" + theHeight + ";z-index:20000;background-color:Transparent;" });
var scroll = Ext.getBody().getScroll();
el.setLeftTop(scroll.left, scroll.top);

el.mask(em.msg || "Working...", em.msgCls || "x-mask-loading");

Please note that you need call el.unmask() and remove element el.remove() when it is required by your business logic

Mar 13, 2009, 8:28 AM
there is nothing happening with the page after the script has been executed, no javascript error either, and i cannot interact with the page anymore after the code has been executed. i tried checking the code after the line el.mask(em.msg || "Working...", em.msgCls || "x-mask-loading"); nothing is happening. where did variable "em" came from?

Mar 13, 2009, 8:31 AM

Just remove em (it is copy-past from coolite-core.js) , try
el.mask("Working...",  "x-mask-loading");

Mar 16, 2009, 2:06 AM
ok, im able to show the body mask now but unable to remove it afterwards, i'm using the following code but i am not able to get the masked element ("x-mask-loading"), it is turning out to be null and i am getting script error in IE. if i add .getEl(), or change the css selector to "x-masked" same thing... i have also tried Ext.getBody().unmask(); but no difference

var el = Ext.getBody().child("x-mask-loading");

Mar 16, 2009, 3:26 AM
ok, after trial and error i finally got it to work as desired, i just added an empty css class attribute to the child element being created

el = Ext.getBody().createChild({ cls:"x-masked-main", style:
"position:absolute;left:0;top:0;width:100%;height:" + theHeight +
";z-index:20000;background-color:Transparent;" });

then use the same code

var el = Ext.getBody().child("div.x-masked-main");

then that did it, using the default css class name for the created child ("x-masked") did something different which was delete the body part of the window behind the mask

Mar 16, 2009, 4:29 AM

Try to add dot to child selector name

var el = Ext.getBody().child(".x-mask-loading");