load mask for body

Code:

---


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

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

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

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?

Hi,

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

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

Code:

---

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

---

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

Code:

---

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

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

Hi,

Try to add dot to child selector name


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