PDA

View Full Version : load mask for body



[WP]joju
Mar 12, 2009, 11:03 AM
var myMask = new Ext.LoadMask(Ext.getBody(), {msg: message});
myMask.show();





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

[WP]joju
Mar 12, 2009, 11:08 AM
just noticed something, your server time is advanced by an hour :-)

Vladimir
Mar 12, 2009, 11:15 AM
Hi,

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

[WP]joju
Mar 13, 2009, 9: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?

Vladimir
Mar 13, 2009, 9:31 AM
Hi,

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

[WP]joju
Mar 16, 2009, 3: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");
el.unmask();
el.remove();

[WP]joju
Mar 16, 2009, 4: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



var
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");
el.unmask();
el.remove();


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

Vladimir
Mar 16, 2009, 5:29 AM
Hi,

Try to add dot to child selector name


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