ExtJS 6, collapsed and expanded tree - drag and drop problems

Question

https://fiddle.sencha.com/#fiddle/1jih

Here is the link to a fiddle. Problem is that after tree is collapsed and then expanded, drag and drop stop working. I'm using Ext.dd.DragZone.

Steps to reproduce:

1. Try to drag Child 1, for example. You will see that it works.
2. Collapse and expand Root
3. You will see that Child 1 (and all other childs) become not draggable

Answer 1

You are only adding the drag zones to tree nodes on startup. When nodes are collapsed and expanded again, their child nodes are destroyed and recreated. You should be able to add the drag zone again to all child nodes in the expand event:

_addDDDragToNode = function (node) {
    var me = this;

    var treeView = node.getOwnerTree().getView();
    me._addDDDragZone(treeView.getNode(node));
    node.on('expand',_addDDDragToNode, me);

    Ext.each(node.childNodes, function(el){
        me._addDDDragToNode(el);
    });
};

That this solution doesn't work seems to be a Sencha bug: A subcomponent (status proxy) of the dragzone is not destroyed when the dragzone is destroyed. I'm not completely sure how to circumvent that bug.