Masking of div elements not working in IE

[balaji.krish]

Hi,

I've a list of controls inside a Div element, and i'm trying to mask the div element using Ext.el.mask('div'). This works fine in Mozilla and in Safari browsers.
In IE the masking is not happening for all the controls inside the div, but I'm able to see the title and the message alert on that masking.

Could someone provide solution for the above problem ?

Regards,
Balaji

[fangzhouxing]

Try to use defer like this:

		this.getEl().mask('', 'x-mask-loading')
		var f = function(result) {
                        ... do something!
		}
		f.defer(100,this,[result])

[balaji.krish]

Hi


this.getEl().mask('', 'x-mask-loading')
var f = function(result) {
... do something!
}
f.defer(100,this,[result])


What we need to do in that function ? Am not having any specific thing to do there,
am just masking that div.

Regards,
Balaji

[fangzhouxing]

After mask , you do nothing?

[balaji.krish]

Hi fangzhouxing,

Am attaching the screenshot for your reference.

The masking is proper in Mozilla,

After masking , if i click on the "Edit" button, the masking will be removed.

Am able to acheive this by over riding the following piece of code.



Ext.override( Ext.Element, {
mask: function( msg, msgCls )
{
if(!Ext.isIE7 && this.getStyle("position") == "static"){
this.setStyle("position", "relative");
}
if(!this._mask){
this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);
}
this.addClass("x-masked");
this._mask.setDisplayed(true);
if(typeof msg == 'string'){
if(!this._maskMsg){
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'){
this._mask.setHeight(this.getHeight());
}
return this._mask;
}
});



Regards,
Balaji