TechQA.

Drag and Drop Treepanel nodes in extJS 6.6.0.13 version throwing TypeError

42 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

extjs extjs6-classic treepanel extjs6.2 dragdropmodule
Original Q&A
1

There are 1 answers

3
Sachin Ibrahimpur 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.

Related Questions in EXTJS

Related Questions in EXTJS6-CLASSIC

Related Questions in TREEPANEL

Related Questions in EXTJS6.2

Related Questions in DRAGDROPMODULE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions