Page 1 of 3 123 LastLast
Results 1 to 10 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. #1
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296

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

    I know, I know, I don't have a reproducible test case. However, it's reproducible on different servers from different users.

    We often run with debug version of the framework, so Sencha can always come back to us, like IBM, and Oracle does, and tell us something like: 'try again with our updated debug version of the framework, we tuned some extra tracing and send back the log to us'

    We could open a Sencha ticket about it but then the other user of the framework having the same issue that may already found the culprit will not be able to help.

    Code:
    setStyle: function(prop, value) {
                var me = this,
                    dom = me.dom,
                    hooks = me.styleHooks,
                    style = dom.style,  //*** exception here
                    name = prop,
                    hook;
    Code:
    setStyle: function(prop, value) {
            var me = this,
                component = me.component,
                width, height;
            me.callParent([
                prop,
                value
            ]);
            if (prop) {
                if (prop === 'width' || (typeof prop !== 'string' && 'width' in prop)) {
                    width = value || prop.width;
                    component.btnWrap.setStyle('table-layout', (!width || width === 'auto') ? '' : 'fixed'); //** calling setStyle
                }
                if (prop === 'height' || (typeof prop !== 'string' && 'height' in prop)) {
                    height = value || prop.height;
                    component.btnEl.setStyle('height', (!height || height === 'auto') ? '' : 'auto');
                }
            }
            return me;
        }
    Stack:
    Code:
     at setStyle (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:31557:28)    at
     Ext.define.setStyle (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:151288:35)    at 
    Ext.define.writeProps (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:181939:16)    at 
    Ext.define.flush (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:181126:16)    at 
    Ext.define.flush (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:182559:26)    at 
    Ext.define.run (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:183102:12)    at 
    Function.Ext.define.statics.flushLayouts (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:54084:25)    at Function.Ext.define.statics.updateLayout (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:54142:24)    at 
    Ext.define.updateLayout (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:58777:31)    at Ext.define.onContentChange (http://qa21.contentsexpress.lan/app.js?_dc=1425681827396:78960:20)
    Ext JS version: "5.1.1.308"

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,239

    Default

    With no context it's not really possible to say. The best that can be gleaned from that is that perhaps it's running a layout on a destroyed component, or for some reason that element has been destroyed.

    It could well be a bug in your code, or possibly one in the framework, but without any other information it's not really feasible to forward.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    67

    Default

    Yes, we are seeing the same problem with code that "worked" in 4.2.x but gives this same error in 5.1

    So far we have not been able to find a solution and unable to continue upgrading to 5.1

  4. #4
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296

    Default

    We use this override in production, please notice that it uses custom logging you will have to update:

    Code:
    Ext.define('Ext.override.ButtonElement', {
        override: 'Ext.dom.ButtonElement',
        setSize: function (width, height, animate) {
            var me = this,
                component = me.component;
    
    
            me.callParent([width, height, animate]);
    
    
            // Fix start
            // This is to provide more debugging info for an intermitent issue we have on client browser
            // See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
            if (!component.btnWrap.dom) {
                OPApp.app.logCustomError('ButtonElement trying to setStyle to a button btnWrap not having any dom. Class:' + component.$className + ' itemId:' + component.itemId);
            } else // Fix end	
                component.btnWrap.setStyle(
                    'table-layout',
                    (!width || width === 'auto') ? '' : 'fixed'
                );
    
    
            component.btnEl.setStyle(
                'height',
                (!height || height === 'auto') ? '' : 'auto'
            );
    
    
            return me;
        }, setStyle: function (prop, value) {
            var me = this,
                component = me.component,
                width, height;
    
    
            me.callParent([prop, value]);
    
    
            if (prop) {
                if (prop === 'width' || (typeof prop !== 'string' && 'width' in prop)) {
                    width = value || prop.width;
                    // Fix start
                    // This is to provide more debugging info for an intermitent issue we have on client browser
                    // See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
                    if (!component.btnWrap.dom) {
                        OPApp.app.logCustomError('ButtonElement trying to setStyle to a button btnWrap not having any dom. Class:' + component.$className + ' itemId:' + component.itemId);
                    } else // Fix end	
                    component.btnWrap.setStyle(
                        'table-layout',
                        (!width || width === 'auto') ? '' : 'fixed'
                    );
                }
    
    
                if (prop === 'height' || (typeof prop !== 'string' && 'height' in prop)) {
                    height = value || prop.height;
    
    
                    component.btnEl.setStyle(
                        'height',
                        (!height || height === 'auto') ? '' : 'auto'
                    );
                }
            }
    
    
            return me;
        },
        setWidth: function (width, animate) {
            this.callParent([width, animate]);
            // Fix start
            // This is to provide more debugging info for an intermitent issue we have on client browser
            // See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
            if (!component.btnWrap.dom) {
                OPApp.app.logCustomError('ButtonElement trying to setStyle to a button btnWrap not having any dom. Class:' + component.$className + ' itemId:' + component.itemId);
            } else // Fix end	
            this.component.btnWrap.setStyle(
                'table-layout',
                (!width || width === 'auto') ? '' : 'fixed'
            );
    
    
            return this;
        }
    });

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,239

    Default

    As I said above, from that all I can see is that it's trying to run a layout on a button that has been destroyed or possibly removed from the DOM. Without any more information we can't really progress with it.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    24

    Default Same problem

    I'm attempting to upgrade to extjs 5 and am getting the same error. In my case though it's happening just from trying to .show() a window.

    Using this code in a fresh project works fine. But I'm stumped as to how to debug this issue in my upgrade code.

    Window
    Code:
    Ext.define('MyApp.view.loginWin', {
        extend: 'Ext.window.Window',
        alias: 'widget.loginWin',
    
        requires: [
            'MyApp.view.loginWinViewModel',
            'Ext.form.Panel',
            'Ext.form.field.Text'
        ],
    
        viewModel: {
            type: 'loginwin'
        },
        height: 250,
        itemId: 'loginWin',
        width: 400,
        title: 'Login',
        modal: true,
    
        items: [
            {
                xtype: 'form',
                bodyPadding: 10,
                title: 'My Form',
                items: [
                    {
                        xtype: 'textfield',
                        anchor: '100%',
                        itemId: 'name',
                        fieldLabel: 'Label'
                    }
                ]
            }
        ]
    
    });

    Event to show window
    Code:
    Ext.create('widget.loginWin',{
                renderTo:Ext.getBody(),
                listeners:[{
                        afterrender:function(){
                            //show window
                            this.show();
                        }
                }]
            });


    Stacktrace
    Code:
    Uncaught TypeError: Cannot read property 'style' of nullext-all-rtl-debug.js?_dc=1429222084984:16723 
    Ext.define.beforeShowext-all-rtl-debug.js?_dc=1429222084984:16536 
    Ext.define.showext-all-rtl-debug.js?_dc=1429222084984:22429 
    setUnderlaysVisibleext-all-rtl-debug.js?_dc=1429222084984:28766 
    Ext.define.setVisibleext-all-rtl-debug.js?_dc=1429222084984:28825 
    Ext.define.showext-all-rtl-debug.js?_dc=1429222084984:40517 
    Ext.define.onShowext-all-rtl-debug.js?_dc=1429222084984:7378 
    Ext.Base.Base.addMembers.callParentext-all-rtl-debug.js?_dc=1429222084984:88940 
    Ext.define.onShowext-all-rtl-debug.js?_dc=1429222084984:7378 
    Ext.Base.Base.addMembers.callParentext-all-rtl-debug.js?_dc=1429222084984:111708 
    Ext.define.onShowext-all-rtl-debug.js?_dc=1429222084984:41027 
    Ext.define.showtoolBar.js?_dc=1429222088269:1876 
    Ext.create.listeners.afterrenderext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:12329 
    doFireEventext-all-rtl-debug.js?_dc=1429222084984:33460 
    prototype.doFireEventext-all-rtl-debug.js?_dc=1429222084984:12297 
    fireEventArgsext-all-rtl-debug.js?_dc=1429222084984:12271 
    fireEventext-all-rtl-debug.js?_dc=1429222084984:37148 
    Ext.define.privates.finishRenderext-all-rtl-debug.js?_dc=1429222084984:36924 
    Ext.define.renderext-all-rtl-debug.js?_dc=1429222084984:39105 
    Ext.define.constructorext-all-rtl-debug.js?_dc=1429222084984:7657 
    constructorVM1671:1 (anonymous function)
    ext-all-rtl-debug.js?_dc=1429222084984:8894 
    Ext.ClassManager.Ext.apply.createtoolBar.js?_dc=1429222088269:1871 
    Ext.define.onOpenLoginext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:12329 
    doFireEventext-all-rtl-debug.js?_dc=1429222084984:33460 
    prototype.doFireEventext-all-rtl-debug.js?_dc=1429222084984:12297 
    fireEventArgsext-all-rtl-debug.js?_dc=1429222084984:12271 
    fireEventtoolBar.js?_dc=1429222088269:356 
    Ext.define.mainLoginBtnext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:33354 
    Ext.define.dispatchext-all-rtl-debug.js?_dc=1429222084984:7378 
    Ext.Base.Base.addMembers.callParentext-all-rtl-debug.js?_dc=1429222084984:33536 
    Ext.define.dispatchext-all-rtl-debug.js?_dc=1429222084984:33462 
    prototype.doFireEventext-all-rtl-debug.js?_dc=1429222084984:12297 
    fireEventArgsext-all-rtl-debug.js?_dc=1429222084984:12271
     fireEventext-all-rtl-debug.js?_dc=1429222084984:108900 
    Ext.define.fireHandlerext-all-rtl-debug.js?_dc=1429222084984:108889 
    Ext.define.onClickext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:18545 
    Ext.define.fireext-all-rtl-debug.js?_dc=1429222084984:18521 
    Ext.define.publishext-all-rtl-debug.js?_dc=1429222084984:18571 
    Ext.define.doDelegatedEventext-all-rtl-debug.js?_dc=1429222084984:18558 
    Ext.define.onDelegatedEventext-all-rtl-debug.js?_dc=1429222084984:4402 
    Ext.Function.ExtFunction.bind.method
    ExtJS error
    Code:
    beforeShow: function() {
            var me = this,
                style = me.el.dom.style, // <------- error occurs here
                shim = me.shim;
            if (Ext.supports.CSS3BoxShadow) {
                style[me.boxShadowProperty] = '0 0 ' + (me.offset + 2) + 'px #888';
            } else {
                style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
            }
            
            
            if (shim) {
                shim.realign();
            }
        },

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    24

    Default

    When the shadow is removed from the window I get this debug error instead:

    Code:
     renderItems: function(items, target) {        var me = this,
                dockedItemCount = items.length,
                itemIndex = 0,
                correctPosition = 0,
                staticNodeCount = 0,
                targetNodes = me.getRenderTarget().dom.childNodes, // <----error here
                targetChildCount = targetNodes.length,
                i, j, targetChildNode, item;
            
            for (i = 0 , j = 0; i < targetChildCount; i++) {
                targetChildNode = targetNodes[i];
                if (targetChildNode.nodeType === 1 && Ext.fly(targetChildNode).hasCls(Ext.baseCSSPrefix + 'resizable-handle')) {
                    break;
                }
                for (j = 0; j < dockedItemCount; j++) {
                    item = items[j];
                    if (item.rendered && item.el.dom === targetChildNode) {
                        break;
                    }
                }
                
                
                if (j === dockedItemCount) {
                    staticNodeCount++;
                }
            }
            
            for (; itemIndex < dockedItemCount; itemIndex++ , correctPosition++) {
                item = items[itemIndex];
                
                
                
                
                
                
                
                if (itemIndex === correctPosition && (item.dock === 'right' || item.dock === 'bottom')) {
                    correctPosition += staticNodeCount;
                }
                
                if (item && !item.rendered) {
                    me.renderItem(item, target, correctPosition);
                } else if (!me.isValidParent(item, target, correctPosition)) {
                    me.moveItem(item, target, correctPosition);
                }
            }
        },

    Quote Originally Posted by terryfritsch View Post
    I'm attempting to upgrade to extjs 5 and am getting the same error. In my case though it's happening just from trying to .show() a window.

    Using this code in a fresh project works fine. But I'm stumped as to how to debug this issue in my upgrade code.

    Window
    Code:
    Ext.define('MyApp.view.loginWin', {
        extend: 'Ext.window.Window',
        alias: 'widget.loginWin',
    
        requires: [
            'MyApp.view.loginWinViewModel',
            'Ext.form.Panel',
            'Ext.form.field.Text'
        ],
    
        viewModel: {
            type: 'loginwin'
        },
        height: 250,
        itemId: 'loginWin',
        width: 400,
        title: 'Login',
        modal: true,
    
        items: [
            {
                xtype: 'form',
                bodyPadding: 10,
                title: 'My Form',
                items: [
                    {
                        xtype: 'textfield',
                        anchor: '100%',
                        itemId: 'name',
                        fieldLabel: 'Label'
                    }
                ]
            }
        ]
    
    });

    Event to show window
    Code:
    Ext.create('widget.loginWin',{
                renderTo:Ext.getBody(),
                listeners:[{
                        afterrender:function(){
                            //show window
                            this.show();
                        }
                }]
            });


    Stacktrace
    Code:
    Uncaught TypeError: Cannot read property 'style' of nullext-all-rtl-debug.js?_dc=1429222084984:16723 
    Ext.define.beforeShowext-all-rtl-debug.js?_dc=1429222084984:16536 
    Ext.define.showext-all-rtl-debug.js?_dc=1429222084984:22429 
    setUnderlaysVisibleext-all-rtl-debug.js?_dc=1429222084984:28766 
    Ext.define.setVisibleext-all-rtl-debug.js?_dc=1429222084984:28825 
    Ext.define.showext-all-rtl-debug.js?_dc=1429222084984:40517 
    Ext.define.onShowext-all-rtl-debug.js?_dc=1429222084984:7378 
    Ext.Base.Base.addMembers.callParentext-all-rtl-debug.js?_dc=1429222084984:88940 
    Ext.define.onShowext-all-rtl-debug.js?_dc=1429222084984:7378 
    Ext.Base.Base.addMembers.callParentext-all-rtl-debug.js?_dc=1429222084984:111708 
    Ext.define.onShowext-all-rtl-debug.js?_dc=1429222084984:41027 
    Ext.define.showtoolBar.js?_dc=1429222088269:1876 
    Ext.create.listeners.afterrenderext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:12329 
    doFireEventext-all-rtl-debug.js?_dc=1429222084984:33460 
    prototype.doFireEventext-all-rtl-debug.js?_dc=1429222084984:12297 
    fireEventArgsext-all-rtl-debug.js?_dc=1429222084984:12271 
    fireEventext-all-rtl-debug.js?_dc=1429222084984:37148 
    Ext.define.privates.finishRenderext-all-rtl-debug.js?_dc=1429222084984:36924 
    Ext.define.renderext-all-rtl-debug.js?_dc=1429222084984:39105 
    Ext.define.constructorext-all-rtl-debug.js?_dc=1429222084984:7657 
    constructorVM1671:1 (anonymous function)
    ext-all-rtl-debug.js?_dc=1429222084984:8894 
    Ext.ClassManager.Ext.apply.createtoolBar.js?_dc=1429222088269:1871 
    Ext.define.onOpenLoginext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:12329 
    doFireEventext-all-rtl-debug.js?_dc=1429222084984:33460 
    prototype.doFireEventext-all-rtl-debug.js?_dc=1429222084984:12297 
    fireEventArgsext-all-rtl-debug.js?_dc=1429222084984:12271 
    fireEventtoolBar.js?_dc=1429222088269:356 
    Ext.define.mainLoginBtnext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:33354 
    Ext.define.dispatchext-all-rtl-debug.js?_dc=1429222084984:7378 
    Ext.Base.Base.addMembers.callParentext-all-rtl-debug.js?_dc=1429222084984:33536 
    Ext.define.dispatchext-all-rtl-debug.js?_dc=1429222084984:33462 
    prototype.doFireEventext-all-rtl-debug.js?_dc=1429222084984:12297 
    fireEventArgsext-all-rtl-debug.js?_dc=1429222084984:12271
     fireEventext-all-rtl-debug.js?_dc=1429222084984:108900 
    Ext.define.fireHandlerext-all-rtl-debug.js?_dc=1429222084984:108889 
    Ext.define.onClickext-all-rtl-debug.js?_dc=1429222084984:11800 
    fireext-all-rtl-debug.js?_dc=1429222084984:18545 
    Ext.define.fireext-all-rtl-debug.js?_dc=1429222084984:18521 
    Ext.define.publishext-all-rtl-debug.js?_dc=1429222084984:18571 
    Ext.define.doDelegatedEventext-all-rtl-debug.js?_dc=1429222084984:18558 
    Ext.define.onDelegatedEventext-all-rtl-debug.js?_dc=1429222084984:4402 
    Ext.Function.ExtFunction.bind.method
    ExtJS error
    Code:
    beforeShow: function() {
            var me = this,
                style = me.el.dom.style, // <------- error occurs here
                shim = me.shim;
            if (Ext.supports.CSS3BoxShadow) {
                style[me.boxShadowProperty] = '0 0 ' + (me.offset + 2) + 'px #888';
            } else {
                style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
            }
            
            
            if (shim) {
                shim.realign();
            }
        },

  8. #8
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    1

    Default

    Hi to everyone,I had the same error on window.show() (This error occur randomly in my project, the same window sometimes opens and sometimes not), when i set the shadow:false in the window everything works fine.

  9. #9
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337

    Default

    We ran into a similar issue in our application using 5.1.1. I unfortunately don't have a working test case either since I don't know exactly what part of the application causes it. I do know though that for us it is directly related to Ext.useShims. When set to false the issue does not come up. If I had to guess it is because of a timing issue which is why it seems to be difficult to reproduce.

    It seems to have to do with Ext.dom.UnderlayPool. In the case when the error happens the UnderlayPool cache contains an el that is already destroyed (isDestroyed is true and dom is undefined). When the checkOut method is called the destroyed el is returned and when el.dom.style is accessed it causes the error. When the error came up the cache did contain a second el that was not destroyed. I don't know if that second el is the correct el or if a new el should be created. I'm currently testing with the below override and it seems to fix the issue. I don't know what kind of side effects this may have though so use at your own risk. It's possible that instead of shifting again the if statement that checks if el exists should also check if that el is destroyed which would then create a new el.

    Code:
    Ext.define('Overrides.dom.UnderlayPool', {
        override: 'Ext.dom.UnderlayPool',
        /**
         * Override to check if el is destroyed
         */
        checkOut: function() {
            var el = this.cache.shift();
    
            // If el is destroyed shift again
            if (el && el.isDestroyed) {
                el = this.cache.shift();
            }
    
            if (!el) {
                el = Ext.Element.create(this.elementConfig);
                el.setVisibilityMode(2);
    
    
                el.dom.setAttribute('data-sticky', true);
            }
            return el;
        }
    });

  10. #10

    Default Similar issue on card stack setActiveItem

    I am facing a similar issue with the card stack's setActiveItem flow.
    Cannot read property 'style' of null at setStyle


    Follows the callstack from chrome.Capture.PNG

    Any help or pointers would be much appreciated.

    Sencha version 5.1.1

    Thanks
    Sushant

Page 1 of 3 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
  •