Uncaught TypeError: Cannot read property 'isSynchronized' of undefined

Question

I have a problem with sorting my ExtJS grid. I'm using Ext JS version 5.1.1.451.

The grid loads well but when I try to sort the columns I get the "Uncaught TypeError: Cannot read property 'isSynchronized' of undefined" error.

The method addCls is triggered on mouse movement and when the error occures, me.getData() returns undefined , where me is

constructor
$observableInitialized: true
component: constructor
config: Object
destroy: () {}
dom: null
el: null
events: Object
hasListeners: statics.prepareClass.HasListeners
id: "ext-quicktips-tip"
initConfig: () {}
initialConfig: Object
isDestroyed: true
lastBox: null
managedListeners: Array[0]
shadow: null

This is the addCls method where the error occurs:

addCls: function(names, prefix, suffix) {
        var me = this,
            elementData = me.getData(),
            hasNewCls, dom, map, classList, i, ln, name;
        if (!names) {
            return me;
        }
        if (!elementData.isSynchronized) {
            me.synchronize();
        }

Has anyone encounter this problem before? Is it a known issue or am I doing something wrong?

Thank you

Answer 1

I've overriden the handleMouseDown method and commented out the quick tips part.

Ext.override(Ext.dd.DragDropManager, {
    handleMouseDown: function (e, oDD) {
        var me = this,
            xy, el;
        me.isMouseDown = true;
        //if (Ext.quickTipsActive) {
        //    Ext.tip.QuickTipManager.ddDisable();
        //}
        me.currentPoint = e.getPoint();
        if (me.dragCurrent) {
            me.handleMouseUp(e);
        }
        me.mousedownEvent = e;
        me.currentTarget = e.getTarget();
        me.dragCurrent = oDD;
        el = oDD.getEl();


        Ext.fly(el).setCapture();


        xy = e.getXY();
        me.startX = xy[0];
        me.startY = xy[1];


        me.offsetX = me.offsetY = 0;
        me.deltaX = me.startX - el.offsetLeft;
        me.deltaY = me.startY - el.offsetTop;
        me.dragThreshMet = false;
    }
});

If anyone has a better answer, post it and I will mark it if it's good.

Answer 2

I was having this issue because I was rendering a different value based on some mappings I needed to load separately. If the mappings weren't loaded into the viewmodel then the renderer seemed to fail with that error.

I solved it with some checks for existence of what it needed:

// on the renderer for the column where I have a combobox editor field
renderer: function(value) {
    var mappings = vm.get('ruleMapping')
    if(!!mappings) {
        var rule = _.find(mappings, ['id', value]
        if(!!rule) {
            return `<a href="${rule.link}>${rule.name}</a>"`
        }
    }
    return 'Setting value'
}