[4.1.3] LoadMask.setZIndex can exception in IE8

[westy]

Hi,

It appears that owner.el.getStyle('zIndex') can return a string of "auto" sometimes; have just seen this in IE8.
Thus the index in setZIndex can resolve to NaN which then blows up setStyle:

setZIndex: function(index) {
        var me = this,
            owner = me.activeOwner;
            
        if (owner) {
            // it seems silly to add 1 to have it subtracted in the call below,
            // but this allows the x-mask el to have the correct z-index (same as the component)
            // so instead of directly changing the zIndexStack just get the z-index of the owner comp
            index = parseInt(owner.el.getStyle('zIndex'), 10) + 1;
        }


        me.getMaskEl().setStyle('zIndex', index - 1);
        return me.mixins.floating.setZIndex.apply(me, arguments);
    },

Could we have some defence around it, something like, say:

    setZIndex: function(index) {
        var me = this,
            owner = me.activeOwner,
            ownerZIndex;
            
        if (owner) {
            // it seems silly to add 1 to have it subtracted in the call below,
            // but this allows the x-mask el to have the correct z-index (same as the component)
            // so instead of directly changing the zIndexStack just get the z-index of the owner comp
            ownerZIndex = parseInt(owner.el.getStyle('zIndex'), 10);
            if (!isNaN(ownerZIndex)) {
                index = ownerZIndex + 1;
            }
        }


        me.getMaskEl().setStyle('zIndex', index - 1);
        return me.mixins.floating.setZIndex.apply(me, arguments);
    },

Thanks,
Westy

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[westy]

Another similar thread here.

[Zadneram]

There is similar problem with ZIndexManager._showModalMask which also blindly subtracts 4 from the zIndex. This has been causing errors in IE8 when the zIndex returned by getStyle is "auto".

_showModalMask: function(comp) {
        var me = this,
            zIndex = comp.el.getStyle('zIndex') - 4,
            maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : comp.container,
            viewSize = maskTarget.getBox();

        if (maskTarget.dom === document.body) {
            viewSize.height = Math.max(document.body.scrollHeight, Ext.dom.Element.getDocumentHeight());
            viewSize.width = Math.max(document.body.scrollWidth, Ext.dom.Element.getDocumentWidth());
        }
        if (!me.mask) {
            if (Ext.isIE6) {
                me.maskShim = Ext.getBody().createChild({
                    tag: 'iframe',
                    cls : Ext.baseCSSPrefix + 'shim ' + Ext.baseCSSPrefix + 'mask-shim'
                });
                me.maskShim.setVisibilityMode(Ext.Element.DISPLAY);
            }

            me.mask = Ext.getBody().createChild({
                cls: Ext.baseCSSPrefix + 'mask'
            });
            me.mask.setVisibilityMode(Ext.Element.DISPLAY);
            me.mask.on('click', me._onMaskClick, me);
        }

        if (me.maskShim) {
            me.maskShim.setStyle('zIndex', zIndex);
            me.maskShim.show();
            me.maskShim.setBox(viewSize);
        }
        me.mask.maskTarget = maskTarget;
        me.mask.setStyle('zIndex', zIndex);

        // setting mask box before showing it in an IE7 strict iframe within a quirks page
        // can cause body scrolling [EXTJSIV-6219]
        me.mask.show();
        me.mask.setBox(viewSize);
    }

[scheid]

Thanks for the info and code, westy.

I did put the overrides in and unfortunately am seeing the same behavior still. I'm using 4.2, so I'll make sure nothing would have changed from 4.1.3 to 4.2. Your fix definitely looks like it addresses the problem I'm having though.

I have narrowed the problem in my own code down to the simplified example below. I am dynamically adding buttons to a container, which works fine unless I assign either a baseCls value or a ui value to the button. If I try to render just plain buttons, it's fine.

So the example below will work, but not if you uncomment ui or baseCls. I originally had only a baseCls value that was causing the problem (and honestly, the usage of baseCls confuses me a bit anyway), so I created a custom ui for the button and removed the baseCls value, but it still showed the same error in IE8. Again all of this works fine in all of the current standards compliant browsers. In IE8 I get the invalid argument error for setStyle, and in IE9 I don't get an error, but the buttons don't get styled at all with the ui assignment.

var adminTaskCfg = [


    {viewClassName:"Home", viewId:"home", caption:"Home", atTopLevel: true}  ,
    {viewClassName:"Tenants", viewId:"tenants", caption:"Tenants", atTopLevel: true},
    {viewClassName:"UserAccounts", viewId:"userAccounts", caption:"Users", atTopLevel: true},
    {viewClassName:"Applications", viewId:"applications", caption:"Applications", atTopLevel: true},
    {viewClassName:"Notifications", viewId:"notifications", caption:"Notifications", atTopLevel: false}


];


var i = 0;


//NOTE: menuBar is just a container with an hbox layout
var menuBar = component.up("#adminTasks").down("#menuBar");


for (i = 0; i < adminTaskCfg.length; i++) {


   menuBar.add(
     {
		xtype: 'button',
      /*  ui: "menu-bar-button-ui", */
       /* baseCls:"x-menu-btn",  */
		allowDepress: false,
		enableToggle: true,
		pressed: (i == 0),
		text: adminTaskCfg[i].caption,
		toggleGroup: 'menuButtons'
       }
     );


}

[scheid]

sorry, I replied to the wrong thread, you can ignore this.