CODEWITHSUNDEEP
extjsloadwindowextjs4mask
netemp
netemp

Reputation: 4185

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

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

Upvotes: 2

Views: 3675

Answers (3)

ChrisLo
ChrisLo

Reputation: 199

There is a bug in ExtJS4 Ext.LoadMask which is a problem in Internet Explorer 7 and 8.

When showing a loading mask, ExtJs tries to figure out the zIndex of the parent element, then setting the zIndex of the loading mask. In Internet Explorer 7/8 an element could also have set the zIndex "auto". parseInt of the string "auto" is NaN. Setting the zIndex to NaN causes an error in IE7/IE8.

The solution: override LoadMask

Ext.override(Ext.LoadMask, {
    setZIndex: function(index) {
        var me = this, 
            owner = me.activeOwner;

        if (owner) {
            index = parseInt(owner.el.getStyle('zIndex'), 10) + 1;
        }
        if (!isNaN(index)) {
            me.getMaskEl().setStyle('zIndex', index - 1);
            return me.mixins.floating.setZIndex.apply(me, arguments);
        } else {
            return '';
        }
    }
});

This topic is discussed also in Sencha Forums:

Upvotes: 1

Exter
Exter

Reputation: 136

Give it a try with 

Ext.getBody().mask("Loading")

I use this instead of LoadMask just because in ext you can't mask more than one component with dimmed background color, .mask() does the trick. LoadMask is prettier, but has some issues, so .mask could work.

Upvotes: 0

netemp
netemp

Reputation: 4185

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.

Upvotes: 2

Related Questions