PDA

View Full Version : Dropping on a tree leaf.



shr1975
24 Feb 2009, 1:49 AM
I have a scenario where, in a column tree, the user should be able to drag a node and drop it on a leaf. But if 'leaf: true' is specified, the node doesn't accept children.

I tried overriding the isValidDropPoint and getDropPoint functions in TreeDropZone. But these functions are not invoked at all when I drag a node over a leaf.

Here's my code:
Ext.tree.ColumnTreeDropZone = Ext.extend(Ext.tree.TreeDropZone, {
isValidDropPoint : function(n, pt, dd, e, data)
{
if(!n || !data){ return false; }
var targetNode = n.node;
var dropNode = data.node;
// default drop rules
if(!(targetNode && targetNode.isTarget && pt)){
return false;
}
if(pt == "append" && targetNode.allowChildren === false){
return false;
}
if((pt == "above" || pt == "below")) // removed && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)
{
return false;
}
if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode)))
{
return false;
}
// reuse the object
var overEvent = this.dragOverData;
overEvent.tree = this.tree;
overEvent.target = targetNode;
overEvent.data = data;
overEvent.point = pt;
overEvent.source = dd;
overEvent.rawEvent = e;
overEvent.dropNode = dropNode;
overEvent.cancel = false;
var result = this.tree.fireEvent("nodedragover", overEvent);
return overEvent.cancel === false && result !== false;
},
getDropPoint: function(e, n, dd)
{
var tn = n.node;
if(tn.isRoot){
return tn.allowChildren !== false ? "append" : false; // always append for root
}
var dragEl = n.ddel;
var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
var y = Ext.lib.Event.getPageY(e);
var noAppend = tn.allowChildren === false ; //removed || tn.isLeaf() so as to allow dropping on a leaf.
if(this.appendOnly || tn.parentNode.allowChildren === false){
return noAppend ? false : "append";
}
var noBelow = false;
if(!this.allowParentInsert){
noBelow = tn.hasChildNodes() && tn.isExpanded();
}
var q = (b - t) / (noAppend ? 2 : 3);
if(y >= t && y < (t + q)){
return "above";
}else if(!noBelow && (noAppend || y >= b-q && y <= b)){
return "below";
}else{
return "append";
}
}
});

How can this be achieved?

shr1975
24 Feb 2009, 4:35 AM
It's OK. I have found a solution for it.

sp00k
29 Apr 2009, 2:14 PM
And that solution is.......? Please share as I have the same issue and Im sure others do too

Thanks in advance
Craig

Tilman
30 Apr 2009, 4:51 AM
I also would be interested in a solution to make leaves act as a drop target. There is another thread http://extjs.com/forum/showthread.php?t=58348&highlight=tree+drop+leaf, but I cannot post there, maybe closed already.

Can somebody help us?

aconran
30 Apr 2009, 11:06 AM
The leaf configuration essentially neuters a TreeNode and tells it that it cannot possibly have any children in the future.

What you are looking for is the following:


expanded: true,
children: []


This will give the treenode the appearance of a leaf node but also tell it that it can potentially have children in the future.

Tilman
30 Apr 2009, 11:43 AM
Is "children" the right attribute, should it not be "childNodes"?

Anyway, it does not work: Still I cannot drop nodes on the leaf nodes as I intended. Also allowDrop and isTarget do not help.

I put the attributes you wrote into the baseAttrs of the TreeLoader, is this correct?


var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: true,
loader: new Ext.tree.TreeLoader({
dataUrl:getnodesUrl,
baseAttrs: {
expanded: true,
childNodes: [],
allowDrop: true,
isTarget: true
}
}),
});