Detect target treenode when dragging items to the TreePanel instance

Question

I have GridPanel and TreePanel instances. Elements from GridPanel could be dragged into the treepanel. But I can't detect which tree node receives these dragged items.

I initialize tree panel DD with the following code (method of class derived from Ext.tree.TreePanel):

initDD: function() {
    var treePanelDropTargetEl = this.getEl();
    var treePanelDropTarget = new Ext.dd.DropTarget(treePanelDropTargetEl, {
        ddGroup: 'ddgroup-1',
        notifyDrop: function(ddSource, e, data) {
            // do something with data, here I need to know target tree node
            return true;
        }
    });
}

So how can I find out which tree node received dragged items in the "notifyDrop" handler. I can take e.getTarget() and calculate the node but I don't like that method.

Answer 1

If you use a TreeDropZone (instead of DropTarget) you'll have more tree-specific options and events like onNodeDrop. Note that there are many ways to do DnD with Ext JS.

Answer 2

Here is some kind of solution

MyTreePanel = Ext.extend(Ext.tree.TreePanel, {
  listeners: {
    nodedragover: function(e) {
      // remember node
      this.targetDropNode = e.target;
    }
  }

  initComponent: function() {
    // other initialization steps
    this.targetDropNode = false;
    var config = {
      // ...
      dropConfig: {
        ddGroup: 'mygroupdd',
        notifyDrop: function(ddSource, e, data) {
          // process here using treepanel.targetDropNode
        }
      }
      }
      // ...
    };
    // other initialization steps
  }

});