Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

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

    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    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?

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

    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.

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    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.

  6. #6
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,035

    Default

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

  7. #7
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,035

    Default

    Sorry, should have posted a possible fix too.

    Try:
    Code:
    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
    Code:
    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...
    Product Architect
    Altus Ltd.

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

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

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

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


    Code:
    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.


    Code:
    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.

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

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

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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •