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
    1,012
    Vote Rating
    97
    westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light

      0  

    Default [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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,526
    Vote Rating
    1113
    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
    1,012
    Vote Rating
    97
    westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light westy is a glorious beacon of light

      0  

    Default

    Another similar thread here.
    Product Architect
    Altus Ltd.

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    23
    Vote Rating
    2
    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
    72
    Vote Rating
    5
    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
    72
    Vote Rating
    5
    scheid is on a distinguished road

      0  

    Default

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