load mask for body

[[WP]joju]

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]

just noticed something, your server time is advanced by an hour :-)

[Vladimir]

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]

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]

Hi,

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

[[WP]joju]

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]

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]

Hi,

Try to add dot to child selector name


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