[4.1.3] LoadMask.setZIndex can exception in IE8

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:

Code:

---

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:

Code:

---

    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

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

Another similar thread here.

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".

Code:

---

_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);
    }

---