Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / ViewDropZone2.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-tree-ViewDropZone'>/**
19 </span> * @class Ext.tree.ViewDropZone
20  * @extends Ext.view.DropZone
21  * @private
22  */
23 Ext.define('Ext.tree.ViewDropZone', {
24     extend: 'Ext.view.DropZone',
25
26 <span id='Ext-tree-ViewDropZone-cfg-allowParentInsert'>    /**
27 </span>     * @cfg {Boolean} allowParentInsert
28      * Allow inserting a dragged node between an expanded parent node and its first child that will become a
29      * sibling of the parent when dropped (defaults to false)
30      */
31     allowParentInserts: false,
32  
33 <span id='Ext-tree-ViewDropZone-cfg-allowContainerDrop'>    /**
34 </span>     * @cfg {String} allowContainerDrop
35      * True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false)
36      */
37     allowContainerDrops: false,
38
39 <span id='Ext-tree-ViewDropZone-cfg-appendOnly'>    /**
40 </span>     * @cfg {String} appendOnly
41      * True if the tree should only allow append drops (use for trees which are sorted, defaults to false)
42      */
43     appendOnly: false,
44
45 <span id='Ext-tree-ViewDropZone-cfg-expandDelay'>    /**
46 </span>     * @cfg {String} expandDelay
47      * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
48      * over the target (defaults to 500)
49      */
50     expandDelay : 500,
51
52     indicatorCls: 'x-tree-ddindicator',
53
54     // private
55     expandNode : function(node) {
56         var view = this.view;
57         if (!node.isLeaf() &amp;&amp; !node.isExpanded()) {
58             view.expand(node);
59             this.expandProcId = false;
60         }
61     },
62
63     // private
64     queueExpand : function(node) {
65         this.expandProcId = Ext.Function.defer(this.expandNode, this.expandDelay, this, [node]);
66     },
67
68     // private
69     cancelExpand : function() {
70         if (this.expandProcId) {
71             clearTimeout(this.expandProcId);
72             this.expandProcId = false;
73         }
74     },
75
76     getPosition: function(e, node) {
77         var view = this.view,
78             record = view.getRecord(node),
79             y = e.getPageY(),
80             noAppend = record.isLeaf(),
81             noBelow = false,
82             region = Ext.fly(node).getRegion(),
83             fragment;
84
85         // If we are dragging on top of the root node of the tree, we always want to append.
86         if (record.isRoot()) {
87             return 'append';
88         }
89
90         // Return 'append' if the node we are dragging on top of is not a leaf else return false.
91         if (this.appendOnly) {
92             return noAppend ? false : 'append';
93         }
94
95         if (!this.allowParentInsert) {
96             noBelow = record.hasChildNodes() &amp;&amp; record.isExpanded();
97         }
98
99         fragment = (region.bottom - region.top) / (noAppend ? 2 : 3);
100         if (y &gt;= region.top &amp;&amp; y &lt; (region.top + fragment)) {
101             return 'before';
102         }
103         else if (!noBelow &amp;&amp; (noAppend || (y &gt;= (region.bottom - fragment) &amp;&amp; y &lt;= region.bottom))) {
104             return 'after';
105         }
106         else {
107             return 'append';
108         }
109     },
110
111     isValidDropPoint : function(node, position, dragZone, e, data) {
112         if (!node || !data.item) {
113             return false;
114         }
115
116         var view = this.view,
117             targetNode = view.getRecord(node),
118             draggedRecords = data.records,
119             dataLength = draggedRecords.length,
120             ln = draggedRecords.length,
121             i, record;
122
123         // No drop position, or dragged records: invalid drop point
124         if (!(targetNode &amp;&amp; position &amp;&amp; dataLength)) {
125             return false;
126         }
127
128         // If the targetNode is within the folder we are dragging
129         for (i = 0; i &lt; ln; i++) {
130             record = draggedRecords[i];
131             if (record.isNode &amp;&amp; record.contains(targetNode)) {
132                 return false;
133             }
134         }
135         
136         // Respect the allowDrop field on Tree nodes
137         if (position === 'append' &amp;&amp; targetNode.get('allowDrop') === false) {
138             return false;
139         }
140         else if (position != 'append' &amp;&amp; targetNode.parentNode.get('allowDrop') === false) {
141             return false;
142         }
143
144         // If the target record is in the dragged dataset, then invalid drop
145         if (Ext.Array.contains(draggedRecords, targetNode)) {
146              return false;
147         }
148
149         // @TODO: fire some event to notify that there is a valid drop possible for the node you're dragging
150         // Yes: this.fireViewEvent(blah....) fires an event through the owning View.
151         return true;
152     },
153
154     onNodeOver : function(node, dragZone, e, data) {
155         var position = this.getPosition(e, node),
156             returnCls = this.dropNotAllowed,
157             view = this.view,
158             targetNode = view.getRecord(node),
159             indicator = this.getIndicator(),
160             indicatorX = 0,
161             indicatorY = 0;
162
163         // auto node expand check
164         this.cancelExpand();
165         if (position == 'append' &amp;&amp; !this.expandProcId &amp;&amp; !Ext.Array.contains(data.records, targetNode) &amp;&amp; !targetNode.isLeaf() &amp;&amp; !targetNode.isExpanded()) {
166             this.queueExpand(targetNode);
167         }
168             
169             
170         if (this.isValidDropPoint(node, position, dragZone, e, data)) {
171             this.valid = true;
172             this.currentPosition = position;
173             this.overRecord = targetNode;
174
175             indicator.setWidth(Ext.fly(node).getWidth());
176             indicatorY = Ext.fly(node).getY() - Ext.fly(view.el).getY() - 1;
177
178             /*
179              * In the code below we show the proxy again. The reason for doing this is showing the indicator will
180              * call toFront, causing it to get a new z-index which can sometimes push the proxy behind it. We always 
181              * want the proxy to be above, so calling show on the proxy will call toFront and bring it forward.
182              */
183             if (position == 'before') {
184                 returnCls = targetNode.isFirst() ? Ext.baseCSSPrefix + 'tree-drop-ok-above' : Ext.baseCSSPrefix + 'tree-drop-ok-between';
185                 indicator.showAt(0, indicatorY);
186                 dragZone.proxy.show();
187             } else if (position == 'after') {
188                 returnCls = targetNode.isLast() ? Ext.baseCSSPrefix + 'tree-drop-ok-below' : Ext.baseCSSPrefix + 'tree-drop-ok-between';
189                 indicatorY += Ext.fly(node).getHeight();
190                 indicator.showAt(0, indicatorY);
191                 dragZone.proxy.show();
192             } else {
193                 returnCls = Ext.baseCSSPrefix + 'tree-drop-ok-append';
194                 // @TODO: set a class on the parent folder node to be able to style it
195                 indicator.hide();
196             }
197         } else {
198             this.valid = false;
199         }
200
201         this.currentCls = returnCls;
202         return returnCls;
203     },
204
205     onContainerOver : function(dd, e, data) {
206         return e.getTarget('.' + this.indicatorCls) ? this.currentCls : this.dropNotAllowed;
207     },
208     
209     notifyOut: function() {
210         this.callParent(arguments);
211         this.cancelExpand();
212     },
213
214     handleNodeDrop : function(data, targetNode, position) {
215         var me = this,
216             view = me.view,
217             parentNode = targetNode.parentNode,
218             store = view.getStore(),
219             recordDomNodes = [],
220             records, i, len,
221             insertionMethod, argList,
222             needTargetExpand,
223             transferData,
224             processDrop;
225
226         // If the copy flag is set, create a copy of the Models with the same IDs
227         if (data.copy) {
228             records = data.records;
229             data.records = [];
230             for (i = 0, len = records.length; i &lt; len; i++) {
231                 data.records.push(Ext.apply({}, records[i].data));
232             }
233         }
234
235         // Cancel any pending expand operation
236         me.cancelExpand();
237
238         // Grab a reference to the correct node insertion method.
239         // Create an arg list array intended for the apply method of the
240         // chosen node insertion method.
241         // Ensure the target object for the method is referenced by 'targetNode'
242         if (position == 'before') {
243             insertionMethod = parentNode.insertBefore;
244             argList = [null, targetNode];
245             targetNode = parentNode;
246         }
247         else if (position == 'after') {
248             if (targetNode.nextSibling) {
249                 insertionMethod = parentNode.insertBefore;
250                 argList = [null, targetNode.nextSibling];
251             }
252             else {
253                 insertionMethod = parentNode.appendChild;
254                 argList = [null];
255             }
256             targetNode = parentNode;
257         }
258         else {
259             if (!targetNode.isExpanded()) {
260                 needTargetExpand = true;
261             }
262             insertionMethod = targetNode.appendChild;
263             argList = [null];
264         }
265
266         // A function to transfer the data into the destination tree
267         transferData = function() {
268             var node;
269             for (i = 0, len = data.records.length; i &lt; len; i++) {
270                 argList[0] = data.records[i];
271                 node = insertionMethod.apply(targetNode, argList);
272                 
273                 if (Ext.enableFx &amp;&amp; me.dropHighlight) {
274                     recordDomNodes.push(view.getNode(node));
275                 }
276             }
277             
278             // Kick off highlights after everything's been inserted, so they are
279             // more in sync without insertion/render overhead.
280             if (Ext.enableFx &amp;&amp; me.dropHighlight) {
281                 //FIXME: the check for n.firstChild is not a great solution here. Ideally the line should simply read 
282                 //Ext.fly(n.firstChild) but this yields errors in IE6 and 7. See ticket EXTJSIV-1705 for more details
283                 Ext.Array.forEach(recordDomNodes, function(n) {
284                     if (n) {
285                         Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor);
286                     }
287                 });
288             }
289         };
290
291         // If dropping right on an unexpanded node, transfer the data after it is expanded.
292         if (needTargetExpand) {
293             targetNode.expand(false, transferData);
294         }
295         // Otherwise, call the data transfer function immediately
296         else {
297             transferData();
298         }
299     }
300 });</pre>
301 </body>
302 </html>