elementData undefined in removeCls during destroy

[nhustak]

We are seeing this issue since our conversion to Ext 6. It happens pretty consistently but there are times it does not occur - but once it happens it keeps happening.

In this case, it's some legacy code that has a fairly complex widget that that is being destroyed & recreated when shown. The destroy fails with this error. We have this happening in at least four places in our app.

Any help would be greatly appreciated. I realize not being able to replicate this in a fiddle or something simple is an issue - however I believe the issue only crops up in complex situations. It appears to be timing related as I can sometimes get it to work 1-3 times before it fails by being patient and letting the page sit between clicks.

I found this post under Ext 5 that doesn't appear to have been resolved. https://forum.sencha.com/forum/showt...ementData-null

        removeCls: function(names, prefix, suffix) {
            var me = this,
                elementData = me.getData(),
                hasNewCls, dom, map, classList, i, ln, name;
            if (!names) {
                return me;
            }
            if (!elementData.isSynchronized) {  <--- Crashes here with elementData undefined
                me.synchronize();
            }
            dom = me.d

Here's the crash in JS

[COLOR=red !important]Uncaught TypeError: Cannot read property 'isSynchronized' of undefined[/COLOR]
removeCls
@
ext-all-debug.js?_dc=20151113080941:37044

Ext.define.destroy
@
ext-all-debug.js?_dc=20151113080941:122426

Ext.Base.Base.addMembers.callParent
@
ext-all-debug.js?_dc=20151113080941:12115

Ext.define.destroy
@
ext-all-debug.js?_dc=20151113080941:122520

Ext.Base.Base.addMembers.callParent
@
ext-all-debug.js?_dc=20151113080941:12115

Ext.define.destroy
@
ext-all-debug.js?_dc=20151113080941:138094

Ext.apply.destroy
@
ext-all-debug.js?_dc=20151113080941:1970

Ext.define.beforeDestroy
@
ext-all-debug.js?_dc=20151113080941:125052

Ext.Base.Base.addMembers.callParent
@
ext-all-debug.js?_dc=20151113080941:12115

Ext.define.beforeDestroy
@
ext-all-debug.js?_dc=20151113080941:144255

Ext.define.destroy
@
ext-all-debug.js?_dc=20151113080941:64640

Ext.Base.Base.addMembers.callParent
@
ext-all-debug.js?_dc=20151113080941:12115

(anonymous function)
@
ext-all-debug.js?_dc=20151113080941:19749

Ext.Base.Base.addMembers.callParent
@
ext-all-debug.js?_dc=20151113080941:12115

Ext.define.destroy
@
ext-all-debug.js?_dc=20151113080941:125057

Ext.Base.Base.addMembers.callParent
@
ext-all-debug.js?_dc=20151113080941:12115

Ext.define.destroy
@
ext-all-debug.js?_dc=20151113080941:144258

Ext.define.selectSearch
@
RemediationRankSections.js?_dc=20151113080941:433

onclick
@
default.aspx:1

[Gary Schlosberg]

Thanks for the report. Yes, a test case would be ideal. Does the override on that thread work for you in 6.x?

[nhustak]

Thanks for the quick reply! Yes that seems to fix it with no ill effects that I can see. I'm going to do some more thorough testing with it now.Nick

[nhustak]

Arhg. Well it mostly worked but now I"m getting this one. Related I suspect - it's like it's already destroyed. This is from one of the other sections that was having the issue. It has cleared up the issue with two of them.

   
    clearTip: function() {
        var me = this,
            el = me.el;
        if (Ext.quickTipsActive && Ext.isObject(me.tooltip)) {
            Ext.tip.QuickTipManager.unregister(el);
        } else {
            el.dom.removeAttribute(me.getTipAttr()); <---- dom is null
        }
    },

[nhustak]

Modified clearTip and all screens see to be working.

    
    clearTip: function() {
        var me = this,
            el = me.el;
        if (Ext.quickTipsActive && Ext.isObject(me.tooltip)) {
            Ext.tip.QuickTipManager.unregister(el);
        } else {
            if ( el.dom != null ) {
                el.dom.removeAttribute(me.getTipAttr());
                }
        }
    },

[tlloyduk]

I still see this in ExtJS 6.5.2.463, fixed with an override as you suggest nhustak:

Ext.define('Ext.overrides.Button',{
override: 'Ext.button.Button',
constructor: function(config) {
this.callParent(arguments);
},

clearTip: function() {
var me = this,
el = me.el;
if (Ext.quickTipsActive && Ext.isObject(me.tooltip)) {
Ext.tip.QuickTipManager.unregister(el);
} else {
if ( el.dom !== null ) { // BUG FIX - https://www.sencha.com/forum/showthread.php?306738
el.dom.removeAttribute(me.getTipAttr());
}
}
}
});

[Animal]

This complex widget. How is it being created and destroyed?

It looks like destroyed components are attempting to be reused. Are you using hardcoded IDs?

[tlloyduk]

Hi Animal

Yes it is hard to know what is triggering it. I have a button inside a tabbar which might be where it's triggering, but the only place I'm using tooltips is with charts inside tabs. So it's hard to know what is triggering the error. I'm not using hardcoded ID's - never ever

Thanks

[Animal]

And when you say "inside", you're not rendering stuff?

[tlloyduk]

A button inside tabbar, like so:

Ext.define('USSportal.view.Analytics.TabContainer', {    extend: 'Ext.tab.Panel',
    alias: 'widget.analytics.tabcontainer',


    requires: [
        'USSportal.view.Analytics.TabContainerViewModel',
        'USSportal.view.Analytics.TabContainerViewController',
        'Ext.tab.Bar',
        'Ext.ux.TabCloseMenu',
        'Ext.ux.TabReorderer'
    ],


    controller: 'analytics.tabcontainer',
    viewModel: {
        type: 'analytics.tabcontainer'
    },
    height: 250,
    itemId: 'AnalyticsTabContainer',
    width: 400,
    activeTab: 0,


    tabBar: {
        xtype: 'tabbar',
        items: [
            {
                xtype: 'button',
                ui: 'success-btn',
                cls: 'test-products-add-account',
                text: 'Add Account',
                iconCls: 'fa fa-plus',
                iconAlign: 'right',
                listeners: {
}
....