You found a bug! We've classified it as EXTJS-8134 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    845
    Vote Rating
    39
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default [4.1.3] LoadMask.setZIndex can exception in IE8

    [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
    Product Architect
    Altus Ltd.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

  3. #3
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    845
    Vote Rating
    39
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Another similar thread here.
    Product Architect
    Altus Ltd.

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    15
    Vote Rating
    1
    Zadneram is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    62
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


    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.

    Code:
    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'
           }
         );
    
    
    }

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    62
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


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