PDA

View Full Version : DnD between treepanels



admiralato
19 Feb 2009, 6:08 PM
I've been working with ExtJS for a while now and I am currently stuck on a problem, so here's my problem...

- I have a tree panel let's call it MainTree
- I have an explore function that when a user right-clicks a node from MainTree, it displays all the child nodes of that node in a separate tree and window, let's call this tree..Tree2. You can display numerous trees in a separate window from exploring the nodes from MainTree, so you can have Tree3, Tree4, Tree5, and so on..
- Now from the windows and trees that are created in this explore function, I need to be able to drag nodes from Tree2 to the MainTree or vice versa, Tree2 to Tree3 and vice versa..and so on. Basically, I need to be able to drag nodes from wherever tree I want.

Currently, I was able to drag & drop nodes from Tree2 to the MainTree, it only works during the first drop, but on the second time, the Tree2 events doesn't trigger anymore...and I wonder why that happens...why actually does it only work for the first DnD?

Hope you could help.

20 Feb 2009, 9:08 AM
I'm going to post this quick and dirty example on my blog soon:


Ext.BLANK_IMAGE_URL='/ext2/resources/images/default/s.gif'
Ext.onReady(function() {
var childItems = [{
text : 'woot',
children : [
{
text : 'woot1',
allowDrag : true,
allowDrop : false,
leaf : true
},
{
text : 'woot2',
allowDrag : true,
allowDrop : false,
leaf : true
}
]
},
{
text : 'foo',
children : [
{
text : 'bar1',
allowDrag : true,
allowDrop : false,
leaf : true
},
{
text : 'bar2',
allowDrag : true,
allowDrop : false,
leaf : true
}
]
}];


var srcTree = new Ext.tree.TreePanel({
title : 'source tree',
columnWidth : .5,
height : 200,
enableDD : true,
ddConfig : {
allowDrop : false
},
root : new Ext.tree.AsyncTreeNode({
text : 'Tree root',
children : childItems,
expanded : true,
allowDrag : false

})
});

var destTree = new Ext.tree.TreePanel({
title : 'dest tree',
columnWidth : .5,
height : 200,
enableDD : true,
ddConfig : {
allowDrop : false
},
root : new Ext.tree.AsyncTreeNode({
text : 'Tree root',
allowDrag : false,
children : [],
expanded : true
})
});


new Ext.Panel({
renderTo : Ext.getBody(),
layout : 'column',
height : 200,
width : 400,
items : [
srcTree,
destTree
]
});
});