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. 7 Mar 2015, 4:38 AM #1
    SebTardif
    SebTardif is offline
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    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. 7 Mar 2015, 11:47 AM #2
    evant
    evant is offline
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    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.
  3. 1 Apr 2015, 10:03 AM #3
    dgherrig
    dgherrig is offline
    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. 1 Apr 2015, 11:50 AM #4
    SebTardif
    SebTardif is offline
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    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. 1 Apr 2015, 1:25 PM #5
    evant
    evant is offline
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    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.
  6. 16 Apr 2015, 2:32 PM #6
    terryfritsch
    terryfritsch is offline
    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. 16 Apr 2015, 2:54 PM #7
    terryfritsch
    terryfritsch is offline
    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. 26 Apr 2015, 10:50 AM #8
    thimiosps
    thimiosps is offline
    Sencha Premium User
    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. 10 Jul 2015, 6:57 AM #9
    droessner
    droessner is offline
    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. 26 Oct 2015, 11:07 PM #10
    sushantkunal
    sushantkunal is offline
    Sencha User
    Join Date
    May 2014
    Posts
    2

    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
« Tooltips not showing on some machines | Duplicate rows after reload on client side filtered grid »

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
  •  

Forum Rules