ExtJs4 + IE8, getting 'invalid argument' error (on call to setStyle)

[scheid]

Hi all,

I'm using Ext|Js 4.2, and have an application that runs fine in all the current browsers. However, we still have IE 8 as a browser requirement (yeah, yeah, I know. . .) .

So, IE 8 is bombing (shocker) on a call to setStyle, specifically at this line: style[hook.name] = value; (line 21074 of ext-dev.js)

According to the IE debugger, hook.name is "lineHeight", and value is "NaNpx"

I'm not explicitly setting a lineHeight using setStyle in my code, so it must be something that ExtJs is doing itself, and I'm not sure where the NaN is coming from.

This actually works ok in IE 9 if that tells you anything.

Probably not a lot of info to go on, but I wanted to see if any of you running ExtJs4 + IE8 have run into this. Googling didn't really turn up anything for me.

Thanks.

[scottmartin]

Any chance you are upgrading from an older version, or have custom styles in place that would be causing this?

Are you able to duplicate this in a small test case?

[scheid]

Thanks for the quick reply. My main viewport has a card layout, and this is error is happening when I try to add one of my views into this viewport.(like: Ext.ComponentQuery.query("mainviewport")[0].add( this.getView("MainView").create() ); ) (it's executing in a controller, so 'this' is the controller itself) .The view is fairly complex, so I will try to at least isolate it down to part of that view. I can add other, simpler views to the viewport in a similar manner, so I don't think it's anything related to the add method itself.

[scheid]

oh, sorry, to answer your questions: no, this wasn't upgraded from an older version. I am using Architect, and started the extjs 4.2 project in it. I do have custom classes applied to some of the components, and use setStyle in a few places. I use setStyle only as a temporary thing for animating between views. But I don't use setStyle with lineHeight which is where IE8 seems to be bombing.

[scottmartin]

Ext.ComponentQuery.query("mainviewport")[0].add( this.getView("MainView").create()

That is a mighty powerful statement

I would first try to break it down into a simply case.
a) Usually helps to isolate the problem
b) We would need a test case to help out, as this should not be an issue out of the box.

Scott.

[westy]

My guess is that it's trying to set the zIndex using setStyle. See here: http://www.sencha.com/forum/showthre...ception-in-IE8

[westy]

Sorry, should have posted a possible fix too.

Try:

Ext.define('Blah.overrides.LoadMask', {
    override: 'Ext.LoadMask',


    /**
     * Fix for issue reported here: http://www.sencha.com/forum/showthread.php?252789-4.1.3-LoadMask.setZIndex-can-exception-in-IE8
     */
    getMaskEl: function(){
        var me = this,
            zIndex;


        if (!me.maskEl) {
            zIndex = me.el.getStyle('zIndex');


            me.maskEl = me.el.insertSibling({
                cls: me.maskCls,
                style: {
                    // SEM FIX
                    // Only minus 2 here if zIndex is a number, else just use zIndex (e.g. "auto")
                    zIndex: !isNaN(parseInt(zIndex, 10)) ? zIndex - 2 : zIndex
                    // SEM FIX
                }
            }, 'before');
        }


        return me.maskEl;
    },


    /**
     * Fix for issue reported here: http://www.sencha.com/forum/showthread.php?252789-4.1.3-LoadMask.setZIndex-can-exception-in-IE8
     */
    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
            // <Westyfix>
            ownerZIndex = parseInt(owner.el.getStyle('zIndex'), 10);
            if (!isNaN(ownerZIndex)) {
                index = ownerZIndex + 1;
            }
            // </Westyfix>
        }


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

And

Ext.define('Blah.overrides.ZIndexManager', {
    override: 'Ext.ZIndexManager',


    /**
     * Fix for issue reported here: http://www.sencha.com/forum/showthread.php?252789-4.1.3-LoadMask.setZIndex-can-exception-in-IE8
     * Also see COM-1326.
     */
    _showModalMask: function(comp) {
        var me = this,
            zIndex = comp.el.getStyle('zIndex'),
            maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : comp.container,
            viewSize = maskTarget.getBox();


        // SEM FIX
        // If the zIndex is a string (e.g. "auto") then don't do anything with zIndex,
        // otherwise minus 4 as before...
        if (!isNaN(parseInt(zIndex, 10))) {
            zIndex -= 4;
        }
        // SEM FIX


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

These are 4.1.3 overrides, so may want to check against whatever version you are using, that the code is still the same.

Hope this helps. Apologies if I missed an override...

[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]

So, the error is occurring inside of the define in ext-dev.js that starts like this:

Ext.define('Ext.dom.AbstractElement_style', {


    override: 'Ext.dom.AbstractElement'

   . . .
   . . .

And, so in an attempt to intercept the 'bad' value (NaNpx) before it hits the parent function, I created the override below, but it still does not fix the error in IE8. This still works fine in all of the current day browsers.


Is this an appropriate/recommended strategy for dealing with this? Just wondering if I'm even in the right ballpark.

Ext.override(Ext.dom.Element, {
    
    setStyle: function(prop, value){
                
        var re = new RegExp(/NaNpx/ig);
        var _value = value;
        
        if (value) {
            if (value.search) {
               if (value.search(re) > -1) { _value = "inherit"; }  //not sure if 'inherit' is a proper global fix
            }
        }
                
        return this.callSuper([prop, _value]);
        
    }
    
    
});

Thanks.

[scheid]

Also, this looks like the same issue I'm having too:

http://www.sencha.com/forum/archive/...t-266042.html?