Drag and Drop Treepanel nodes in extJS 6.6.0.13 version throwing TypeError

73 Views Asked by At

I am using a drag drop handler inside my code and a function which confirms share has a ext.Msg.Confirm which is driving the code to trigger ViewDragZone from "Ext/Classic/Src/Tree". How can we resolve the error which is triggered from extjs code? Any help is much appriciated

the error is triggering from:

afterRepair: function() {
    var me = this,
        view = me.view,
        selectedRowCls = view.selectedItemCls,
        records = me.dragData.records,
        r,
        rLen = records.length,
        fly = Ext.fly,
        item;
    if (Ext.enableFx && me.repairHighlight) {
        // Roll through all records and highlight all the ones we attempted to drag.
        for (r = 0; r < rLen; r++) {
            // anonymous fns below, don't hoist up unless below is wrapped in
            // a self-executing function passing in item.
            item = view.getNode(records[r]);
            // We must remove the selected row class before animating, because
            // the selected row class declares !important on its background-color.
            fly(item.firstChild).highlight(me.repairHighlightColor, {
                listeners: {
                    beforeanimate: function() {
                        if (view.isSelected(item)) {
                            fly(item).removeCls(selectedRowCls);
                        }
                    },
                    afteranimate: function() {
                        if (view.isSelected(item)) {
                            fly(item).addCls(selectedRowCls);
                        }
                    }
                }
            });
        }
    }
    me.dragging = false;
}

});

the error is as below:

 Error while running task - TypeError: Cannot read properties of null (reading 'firstChild')
Caller: function() {
        var me = this,
            items = me.items.getRange(),
            i = 0,
            len = items.length,
            anim;
        //Ext.log('      executing anim runner task with ', len, ' items');
        me.targetArr = {};
        // Single timestamp for all animations this interval
        me.timestamp = new Date();
        // Loop to start any new animations first before looping to
        // execute running animations (which will also include all animations
        // started in this loop). This is a subtle difference from simply
        // iterating in one loop and starting then running each animation,
        // but separating the loops is necessary to ensure that all new animations
        // actually kick off prior to existing ones regardless of array order.
        // Otherwise in edge cases when there is excess latency in overall
        // performance, allowing existing animations to run before new ones can
        // lead to dropped frames and subtle race conditions when they are
        // interdependent, which is often the case with certain Element fx.
        for (; i < len; i++) {
            anim = items[i];
            if (anim.isReady()) {
                //Ext.log('      starting anim ', anim.id, ', target: ', anim.target.id);
                me.startAnim(anim);
            }
        }
        for (i = 0; i < len; i++) {
            anim = items[i];
            if (anim.isRunning()) {
                //Ext.log('      running anim ', anim.target.id);
                me.runAnim(anim);
            }
        }
        //else if (!me.useCSS3) {
        // When using CSS3 transitions the animations get paused since they are not
        // needed once the transition is handed over to the browser, so we can
        // ignore this case. However if we are doing JS animations and something is
        // paused here it's possibly unintentional.
        //Ext.log(' (i)  anim ', anim.id, ' is active but not running...');
        //}
        // Apply all the pending changes to their targets
        me.applyPendingAttrs();
        // Avoid retaining target references after we are finished with anims
        me.targetArr = null;
    }
log @ ext-all-rtl-debug.js?_dc=1705037511331:10025
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47646
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
onTick @ ext-all-rtl-debug.js?_dc=1705037511331:47710
elevate @ ext-all-rtl-debug.js?_dc=1705037511331:2552
timerFn @ ext-all-rtl-debug.js?_dc=1705037511331:7312
setTimeout (async)
defer @ ext-all-rtl-debug.js?_dc=1705037511331:7314
startTimer @ ext-all-rtl-debug.js?_dc=1705037511331:47737
start @ ext-all-rtl-debug.js?_dc=1705037511331:47532
addAnim @ ext-all-rtl-debug.js?_dc=1705037511331:48623
constructor @ ext-all-rtl-debug.js?_dc=1705037511331:50605
constructor @ ext-all-rtl-debug.js?_dc=1705037511331:13981
addAnimation @ ext-all-rtl-debug.js?_dc=1705037511331:52015
animate @ ext-all-rtl-debug.js?_dc=1705037511331:51971
repair @ ext-all-rtl-debug.js?_dc=1705037511331:168505
onInvalidDrop @ ext-all-rtl-debug.js?_dc=1705037511331:168809
onDragDrop @ ext-all-rtl-debug.js?_dc=1705037511331:168735
fireEvents @ ext-all-rtl-debug.js?_dc=1705037511331:163728
(anonymous) @ ext-all-rtl-debug.js?_dc=1705037511331:7399
handleMouseUp @ ext-all-rtl-debug.js?_dc=1705037511331:163448
fire @ ext-all-rtl-debug.js?_dc=1705037511331:21915
fire @ ext-all-rtl-debug.js?_dc=1705037511331:36732
publish @ ext-all-rtl-debug.js?_dc=1705037511331:36692
publishGestures @ ext-all-rtl-debug.js?_dc=1705037511331:37412
onTouchEnd @ ext-all-rtl-debug.js?_dc=1705037511331:37598
publishDelegatedDomEvent @ ext-all-rtl-debug.js?_dc=1705037511331:37497
doDelegatedEvent @ ext-all-rtl-debug.js?_dc=1705037511331:36758
onDelegatedEvent @ ext-all-rtl-debug.js?_dc=1705037511331:36745
ext-all-rtl-debug.js?_dc=1705037511331:10035 console.trace

How is the we can made the firstchild have elements or check its values before the event is triggered. Help / Insights in this question is much appreciated

1

There are 1 best solutions below

3
On

This issue seems fixed in 7.6 or 7.7, try the 7.7 version and see that fixes your issue. From there you can quick check for an override to older versions.