How to fire event after Drag & Drop on TreePanel

Question

How can I use Ext.tree.ViewDDPlugin events?

I have a TreePanel that uses DDPplugin, but I would like to know how to listen for the drop event.

This is what my code looks like:

var monPretree = Ext.create('Ext.tree.Panel',{ id : 'treepanel', title : 'TITRE', //width : 800, //height : 600, width : 500, enableDD: true, useArrows : true, viewConfig : { plugins : { ptype: 'treeviewdragdrop', appendOnly: true, listeners: { drop: function (node, data, overModel, dropPosition) { alert('CHANGE'); }, notifyDrop: function (dragSource, event, data) { var nodeId = data.node.id; alert(nodeId); }, notifyOver: function (dragSource, event, data) { alert('over'); } } } }, singleExpand : false, store : monPrestore, rootVisible : false, 

I would like to enable drop events, for example, but my code is not working

Thanks:)

Answer 1

Take a look at the document:

 beforeinsert( Tree tree, Node parent, Node node, Node refNode, Object options ) 

It starts before a new child is inserted into a node in this tree, return false to cancel the insert ....

Answer 2

I have the same question and found this page.

There’s a note in the documentation in the note: “This event fires through the TreeView. Add listeners to the TreeView object”

I tried to find a method in the tree.Panel class to get the view, unsuccessfully. So, all you have to do is just put the listners block in the configuration in the viewConfig section (not in the plugin section):

 viewConfig : { plugins : { ptype: 'treeviewdragdrop', ... }, listeners: { drop: function (node, data, overModel, dropPosition) { alert('CHANGE'); }, } } }, 

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-drop

Answer 3

In addition to Anton's correct answer above: the code below shows how to "connect from outside" to reset events, for example, from a controller, etc.:

  // Drag & Drop on the TreePanel var ganttTreeView = ganttTreePanel.getView(); ganttTreeView.on({ 'drop': me.onDrop, 'scope': this });; 

Answer 4

You can also catch the drop event by overriding dropConfig inside the TreeGrid or TreePanel. Here is an example of how I did it.

 var myTree = new Tree.TreePanel({ id: 'treepanel', title: 'My Title', enableDD: true, ddGroup: 'GridDD', dataUrl: 'yourMethodURLForJSONData', dropConfig: { dropAllowed: true, ddGroup: "GridDD", notifyDrop: function(source, e, data) { alert("A node/leaf is dropped"); //If you want few more details if (data.grid) { var node = data.selections[0].data; alert("This is a node dropped from a Grid."); } else { var node = data["node"]; alert("This is a node dropped from a Tree."); } } } });​ 

You can also do the same for Ext.ux.tree.TreeGrid. Hope this helps.