ExtJS 4 - Load Mask giving errors in IE8 and IE9 when used while opening a window

Question

I have a window which opens up on a button click. The window takes time to load and hence I am using load mask in following way:

handler:function(){
    var myMask      =       new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."});
    myMask.show();
    var winAppln    =       showWin(myMask);
    if(winAppln){
        var task = new Ext.util.DelayedTask(function(){
            winAppln.show();
        });
        task.delay(2000);
    }
}

I am hiding the mask object in the afterrender function of window in following way:

afterrender:function(){
    if(maskObj){
        maskObj.hide();
    }
}

The above code works fine in all the browsers, except IE (version 9 and 8).

In IE9 and IE8, there is an error generated as "Invalid Argument" in ext-all-debug.js at line 8682 which is as following

me.dom.style[ELEMENT.normalize(style)] = value;

Could anyone guide that what can be a possible reason behind this.

Also, my main purpose is to cover the lag between the click of button & opening of window, so that user is aware about something is happening. Is there a better way of doing this other then using Load Mask, or could Load Mask be used in some different manner, then as shown above?

Thanks in advance.

PS: I am using ExtJS Version 4.0.7

Answer 1

As per the things found by me so far, this issue is caused when the window has modal:true set.

IE 8 and 9 create a conflict between loadMask and modal:true and throw an error.

A workaround for this is to take off modal:true from the window and set it to true in the afterrender event of window once the loadmask hide function has been called as below:

afterrender:function(){
    if(maskObj){
        maskObj.hide();
    }
    this.modal = true;
}

Hope this helps someone looking for the same.