3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.tree.TreeDropZone
9 * @extends Ext.dd.DropZone
11 * @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dropping
12 * @param {Object} config
16 Ext.tree.TreeDropZone = function(tree, config){
18 * @cfg {Boolean} allowParentInsert
19 * Allow inserting a dragged node between an expanded parent node and its first child that will become a
20 * sibling of the parent when dropped (defaults to false)
22 this.allowParentInsert = config.allowParentInsert || false;
24 * @cfg {String} allowContainerDrop
25 * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)
27 this.allowContainerDrop = config.allowContainerDrop || false;
29 * @cfg {String} appendOnly
30 * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)
32 this.appendOnly = config.appendOnly || false;
34 Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.getTreeEl(), config);
36 * The TreePanel for this drop zone
37 * @type Ext.tree.TreePanel
42 * Arbitrary data that can be associated with this tree and will be included in the event object that gets
43 * passed to any nodedragover event handler (defaults to {})
44 * @type Ext.tree.TreePanel
47 this.dragOverData = {};
49 this.lastInsertClass = "x-tree-no-status";
52 Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {
54 * @cfg {String} ddGroup
55 * A named drag drop group to which this object belongs. If a group is specified, then this object will only
56 * interact with other drag drop objects in the same group (defaults to 'TreeDD').
61 * @cfg {String} expandDelay
62 * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
63 * over the target (defaults to 1000)
68 expandNode : function(node){
69 if(node.hasChildNodes() && !node.isExpanded()){
70 node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
75 queueExpand : function(node){
76 this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
80 cancelExpand : function(){
81 if(this.expandProcId){
82 clearTimeout(this.expandProcId);
83 this.expandProcId = false;
88 isValidDropPoint : function(n, pt, dd, e, data){
89 if(!n || !data){ return false; }
90 var targetNode = n.node;
91 var dropNode = data.node;
93 if(!(targetNode && targetNode.isTarget && pt)){
96 if(pt == "append" && targetNode.allowChildren === false){
99 if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
102 if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
106 var overEvent = this.dragOverData;
107 overEvent.tree = this.tree;
108 overEvent.target = targetNode;
109 overEvent.data = data;
110 overEvent.point = pt;
111 overEvent.source = dd;
112 overEvent.rawEvent = e;
113 overEvent.dropNode = dropNode;
114 overEvent.cancel = false;
115 var result = this.tree.fireEvent("nodedragover", overEvent);
116 return overEvent.cancel === false && result !== false;
120 getDropPoint : function(e, n, dd){
123 return tn.allowChildren !== false ? "append" : false; // always append for root
126 var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
127 var y = Ext.lib.Event.getPageY(e);
128 var noAppend = tn.allowChildren === false || tn.isLeaf();
129 if(this.appendOnly || tn.parentNode.allowChildren === false){
130 return noAppend ? false : "append";
133 if(!this.allowParentInsert){
134 noBelow = tn.hasChildNodes() && tn.isExpanded();
136 var q = (b - t) / (noAppend ? 2 : 3);
137 if(y >= t && y < (t + q)){
139 }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
147 onNodeEnter : function(n, dd, e, data){
151 onContainerOver : function(dd, e, data) {
152 if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
153 return this.dropAllowed;
155 return this.dropNotAllowed;
159 onNodeOver : function(n, dd, e, data){
160 var pt = this.getDropPoint(e, n, dd);
163 // auto node expand check
164 if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
165 this.queueExpand(node);
166 }else if(pt != "append"){
170 // set the insert point style on the target node
171 var returnCls = this.dropNotAllowed;
172 if(this.isValidDropPoint(n, pt, dd, e, data)){
177 returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
178 cls = "x-tree-drag-insert-above";
179 }else if(pt == "below"){
180 returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
181 cls = "x-tree-drag-insert-below";
183 returnCls = "x-tree-drop-ok-append";
184 cls = "x-tree-drag-append";
186 if(this.lastInsertClass != cls){
187 Ext.fly(el).replaceClass(this.lastInsertClass, cls);
188 this.lastInsertClass = cls;
196 onNodeOut : function(n, dd, e, data){
198 this.removeDropIndicators(n);
202 onNodeDrop : function(n, dd, e, data){
203 var point = this.getDropPoint(e, n, dd);
204 var targetNode = n.node;
205 targetNode.ui.startDrop();
206 if(!this.isValidDropPoint(n, point, dd, e, data)){
207 targetNode.ui.endDrop();
210 // first try to find the drop node
211 var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
212 return this.processDrop(targetNode, data, point, dd, e, dropNode);
215 onContainerDrop : function(dd, e, data){
216 if (this.allowContainerDrop && this.isValidDropPoint({ ddel: this.tree.getRootNode().ui.elNode, node: this.tree.getRootNode() }, "append", dd, e, data)) {
217 var targetNode = this.tree.getRootNode();
218 targetNode.ui.startDrop();
219 var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, 'append', e) : null);
220 return this.processDrop(targetNode, data, 'append', dd, e, dropNode);
226 processDrop: function(target, data, point, dd, e, dropNode){
238 var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
239 if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
241 return dropEvent.dropStatus;
244 target = dropEvent.target;
245 if(point == 'append' && !target.isExpanded()){
246 target.expand(false, null, function(){
247 this.completeDrop(dropEvent);
248 }.createDelegate(this));
250 this.completeDrop(dropEvent);
256 completeDrop : function(de){
257 var ns = de.dropNode, p = de.point, t = de.target;
258 if(!Ext.isArray(ns)){
262 for(var i = 0, len = ns.length; i < len; i++){
265 t.parentNode.insertBefore(n, t);
266 }else if(p == "below"){
267 t.parentNode.insertBefore(n, t.nextSibling);
273 if(Ext.enableFx && this.tree.hlDrop){
277 this.tree.fireEvent("nodedrop", de);
281 afterNodeMoved : function(dd, data, e, targetNode, dropNode){
282 if(Ext.enableFx && this.tree.hlDrop){
284 dropNode.ui.highlight();
286 this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
290 getTree : function(){
295 removeDropIndicators : function(n){
298 Ext.fly(el).removeClass([
299 "x-tree-drag-insert-above",
300 "x-tree-drag-insert-below",
301 "x-tree-drag-append"]);
302 this.lastInsertClass = "_noclass";
307 beforeDragDrop : function(target, e, id){
313 afterRepair : function(data){
314 if(data && Ext.enableFx){
315 data.node.ui.highlight();