PDA

View Full Version : [CLOSED] [4.1.3] LoadMask.setZIndex can exception in IE8



westy
2 Jan 2013, 5:53 AM
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
2 Jan 2013, 8:09 AM
Thanks for the report! I have opened a bug in our bug tracker.

westy
8 Jan 2013, 1:24 AM
Another similar thread here (http://www.sencha.com/forum/showthread.php?228673-LoadMask-and-setZIndex-and-NaN).

Zadneram
8 Apr 2013, 5:00 AM
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
21 Feb 2014, 12:47 PM
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
21 Feb 2014, 12:48 PM
sorry, I replied to the wrong thread, you can ignore this.