Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 23

Thread: Ext.dom.Element.setStyle Cannot read property 'style' of null

    Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #11
    Sencha Premium Member
    Join Date
    Jun 2015
    Posts
    3

    Default

    I'm facing the same issue. Is there a way to override this setStyle method to prevent this crash?

    I've tried to override it like this :
    Code:
    Ext.override('Ext.dom.Element', {    
        setStyle: function(prop, value) {
            var me = this,
                dom = me.dom,
                hooks = me.styleHooks,
                style = (dom && dom.style) || {},
                name = prop,
                hook;
                
            if (typeof name === 'string') {
                hook = hooks[name];
                if (!hook) {
                    hooks[name] = hook = {
                        name: Element.normalize(name)
                    };
                }
                value = (value == null) ? '' : value;
                    
                if (hook.set) {
                    hook.set(dom, value, me);
                } else {
                    style[hook.name] = value;
                }
                if (hook.afterSet) {
                    hook.afterSet(dom, value, me);
                }
            } else {
                for (name in prop) {
                    if (prop.hasOwnProperty(name)) {
                        hook = hooks[name];
                        if (!hook) {
                            hooks[name] = hook = {
                                name: Element.normalize(name)
                            };
                        }
                        value = prop[name];
                        value = (value == null) ? '' : value;
                            
                        if (hook.set) {
                            hook.set(dom, value, me);
                        } else {
                            style[hook.name] = value;
                        }
                        if (hook.afterSet) {
                            hook.afterSet(dom, value, me);
                        }
                    }
                }
            }
            return me;
        }
        
    });
    But then the line crashing (all the time) is :
    Code:
    name: Element.normalize(name)
    I can't manage to override properly this method.
    It's a really anoying bug because it appears randomly so there is no reproductible scenario...

    Thanks

  2. #12

    Default

    Can you post your layout code.

    I got rid of this issue by changing my layouts.

  3. #13
    Sencha Premium Member
    Join Date
    May 2014
    Location
    Reims, France
    Posts
    62

    Default

    Hi !

    Same error for me, and I'm working on EXTJS 6.0.0
    It occurs sometimes when I ask to close a window.



    Charlotte.

  4. #14

    Default

    We also faced same issue and fixed by overriding UnderlayPool.

    ExtJS has private class "Ext.dom.UnderlayPool". It uses checkOut and checkIn method to get/put cached elements from pool.

    When we use shadow=true for Ext.Component, it uses Ext.dom.UnderlayPool to reuse existing elements. But when it put element back in pool using checkIn method, "Ext.dom.GarbageCollector" destroys that element and makes el.dom to NULL.

    After garbage collector makes el.dom=NULL, polled elements does not comes usable and throws JavaScript errors.

    This specially occurs for floating elements and shadow=true.

  5. #15
    Sencha User
    Join Date
    Dec 2012
    Location
    Philippines
    Posts
    18

    Default Same here

    Any updates?

  6. #16
    Sencha Premium Member
    Join Date
    Dec 2009
    Posts
    3

    Default my solution works but dont know how

    I am using a window with in a panel.
    Window is rendered to the panel and it was constrain within panel (constrain:true).
    I was getting this problem 'Uncaught TypeError: Cannot read property 'style' of null' some time while opening or showing window.
    I made shadow: false for window and never got the error.

    Dont know how but try removing the shadow and it works.

  7. #17
    Sencha User
    Join Date
    Apr 2013
    Posts
    908

    Default

    Fix for this bug has been available for a long time. First droessner posted the solution in this thread on 2015-07-10, then on 2016-02-23 js.aficionado posted slightly tweaked fix in another thread.

    If Sencha devs are not willing to apply the fix even the detailed explanation for this bug and the solution were supplied by the community, they should just make the solution clearly visible and close this thread.

  8. #18
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Northern California
    Posts
    115

    Default

    I recently ran into the same exception within setStyle (this time in a different context related to animations on grid cells). To answer sophien.razali's specific question about the override throwing on Element.normalize, you can replace "Element" with "Ext.dom.Element." You will see that the class definition of Ext.dom.Element uses an alternate form of Ext.define where it's given a function that is then passed a reference to the class - see http://docs.sencha.com/extjs/6.2.0/c...#method-define.

    Bottom line, "Element" in this code is a local equivalent to Ext.dom.Element, but that's not available in your override so you need to use the full class name.

    As to the various cases out there where setStyle will be called on a destroyed element w/o a dom - well, it seems like it can happen in a number of ways, and I think we will opt to make setStyle safe in this case via an override that renders the call a no-op in that case.

    Edit - the override we ended up going with was:

    Code:
    Ext.define('XH-OVERRIDE.dom.Element', {
        setStyle: function(prop, val) {
            return this.dom ? this.callParent([prop, val]) : this;
        }
    });
    to make Ext.dom.Element.setStyle() generally safe in the event its called on an Element w/o a rendered dom.

  9. #19
    Sencha User
    Join Date
    Apr 2013
    Posts
    908

    Default

    @anselmtmcclain Your setStyle() override will not fix the issue entirely, you'll still have exceptions popping-up in other places. See my previous post in this thread for proper solution.

  10. #20
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Northern California
    Posts
    115

    Default

    Quote Originally Posted by hakimio View Post
    @anselmtmcclain Your setStyle() override will not fix the issue entirely, you'll still have exceptions popping-up in other places. See my previous post in this thread for proper solution.
    Hi - my understanding was that that linked fix related specifically to bugs regarding the UnderlayPool, which actually wasn't involved at all in the particular case we were confronting. I had posted that override as a general way to ensure setStyle() doesn't throw for DOM-less Elements, mainly in response to Sophien's post.

    Sounds like there could be proper fixes both to the UnderlayPool handling, but also to other cases where destroyed Elements might be improperly referenced. In any case, however, I don't see a strong reason *not* to make setStyle() safe in this way.

    All the best - ATM

Page 2 of 3 FirstFirst 123 LastLast

Tags for this Thread

Posting Permissions

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