Drag Drop images into EXTJS TreePanel and TreeNode

Question

I have an ExtJs TreePanel in which i've set the enableDrop as true and set the property ddGroup to one of the groups. I have this another ExtJs view from where i need to drag and drop the images. And i know that ddGroup defined for this is media

However the drag and drop never happens. This is my code snippet:

var treePanel = new Ext.tree.TreePanel({
 "id": "myTree",
 "lines": true,
 "animate": true,
 "enableDrop": true,
 "enableDrag": false,
 "ddGroup": "media",
 "containerScroll": true,
 "autoScroll": true,
 "split": true,
 "stateful": true,
 "renderTo": "treeStruc",
 "loader": //my loader,
 "root": new Ext.tree.AsyncTreeNode(treeRootConfig),
 "dropConfig": {
  "ddGroup": 'media'
 },
 "listeners": { 
  "nodedrop": function(e) {   
   //do the check
  }
 }                    
});

Is there anything else that needs to be done?

Thanks.

Is this correct? "enableDrag": false, I would assume that enableDrag should be true — Wolph
Actually i dont want to have the capability to drag my TreeNode around. Just want stuff to be put into my treenode. Anyways i tried that, but still doesnt work. — user320550
Not sure, but I wanted to note that there is no need to type double-quotes around all the config names. Save some typing! — Brian Moeskau
thanks for that. will keep that in mind. But core issue still isnt fixed for me still :( — user320550

ndtreviv ndtreviv · Accepted Answer · 2010-11-10T14:22:10

Although the documentation states that nodedrop is fired when a "DD object" is dropped on a tree node, the source seems to indicate that it's still expecting a valid node.

In order to implement the drag-drop from view to tree, I believe you would have to initialize your own TreeDropZone to handle dropped DD items that are not tree-compatible nodes.

This example: http://dev.sencha.com/deploy/dev/examples/dd/dragdropzones.html shows something similar (although it is a view to grid drag-drop), but you'll likely have to use a TreeDropZone instantiation where they've used a straight out Ext.dd.DropZone object.

Also, make sure that your source view and the target tree share the same ddGroup - although I think you mentioned that they do.

I hope this is in any way helpful!

Drag Drop images into EXTJS TreePanel and TreeNode

1 Answers