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

[sophien.razali]

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 :

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 :

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

[sushantkunal]

Can you post your layout code.

I got rid of this issue by changing my layouts.

[ouCharlotte]

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.

[js.aficionado]

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.

[alusung]

Any updates?

[Kamlanjan]

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.

[hakimio]

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.

[anselmtmcclain]

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:

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.

[hakimio]

@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.

[anselmtmcclain]

@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