/hippo/src/main/webapp/ext/src/dd/DropZone.js

http://hdbc.googlecode.com/ · JavaScript · 262 lines · 64 code · 14 blank · 184 comment · 7 complexity · 3d2b42c58f6367e646ad8e71e7f0ee4a MD5 · raw file

  1. /*!
  2. * Ext JS Library 3.0.0
  3. * Copyright(c) 2006-2009 Ext JS, LLC
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. /**
  8. * @class Ext.dd.DropZone
  9. * @extends Ext.dd.DropTarget
  10. * <p>This class provides a container DD instance that allows dropping on multiple child target nodes.</p>
  11. * <p>By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
  12. * However a simpler way to allow a DropZone to manage any number of target elements is to configure the
  13. * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
  14. * mouse event to see if it has taken place within an element, or class of elements. This is easily done
  15. * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
  16. * {@link Ext.DomQuery} selector.</p>
  17. * <p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
  18. * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
  19. * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
  20. * of these methods to provide application-specific behaviour for these events to update both
  21. * application state, and UI state.</p>
  22. * <p>For example to make a GridPanel a cooperating target with the example illustrated in
  23. * {@link Ext.dd.DragZone DragZone}, the following technique might be used:</p><pre><code>
  24. myGridPanel.on('render', function() {
  25. myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
  26. // If the mouse is over a grid row, return that node. This is
  27. // provided as the "target" parameter in all "onNodeXXXX" node event handling functions
  28. getTargetFromEvent: function(e) {
  29. return e.getTarget(myGridPanel.getView().rowSelector);
  30. },
  31. // On entry into a target node, highlight that node.
  32. onNodeEnter : function(target, dd, e, data){
  33. Ext.fly(target).addClass('my-row-highlight-class');
  34. },
  35. // On exit from a target node, unhighlight that node.
  36. onNodeOut : function(target, dd, e, data){
  37. Ext.fly(target).removeClass('my-row-highlight-class');
  38. },
  39. // While over a target node, return the default drop allowed class which
  40. // places a "tick" icon into the drag proxy.
  41. onNodeOver : function(target, dd, e, data){
  42. return Ext.dd.DropZone.prototype.dropAllowed;
  43. },
  44. // On node drop we can interrogate the target to find the underlying
  45. // application object that is the real target of the dragged data.
  46. // In this case, it is a Record in the GridPanel's Store.
  47. // We can use the data set up by the DragZone's getDragData method to read
  48. // any data we decided to attach in the DragZone's getDragData method.
  49. onNodeDrop : function(target, dd, e, data){
  50. var rowIndex = myGridPanel.getView().findRowIndex(target);
  51. var r = myGridPanel.getStore().getAt(rowIndex);
  52. Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
  53. ' on Record id ' + r.id);
  54. return true;
  55. }
  56. });
  57. }
  58. </code></pre>
  59. * See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
  60. * cooperates with this DropZone.
  61. * @constructor
  62. * @param {Mixed} el The container element
  63. * @param {Object} config
  64. */
  65. Ext.dd.DropZone = function(el, config){
  66. Ext.dd.DropZone.superclass.constructor.call(this, el, config);
  67. };
  68. Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {
  69. /**
  70. * Returns a custom data object associated with the DOM node that is the target of the event. By default
  71. * this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
  72. * provide your own custom lookup.
  73. * @param {Event} e The event
  74. * @return {Object} data The custom data
  75. */
  76. getTargetFromEvent : function(e){
  77. return Ext.dd.Registry.getTargetFromEvent(e);
  78. },
  79. /**
  80. * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
  81. * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
  82. * This method has no default implementation and should be overridden to provide
  83. * node-specific processing if necessary.
  84. * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  85. * {@link #getTargetFromEvent} for this node)
  86. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  87. * @param {Event} e The event
  88. * @param {Object} data An object containing arbitrary data supplied by the drag source
  89. */
  90. onNodeEnter : function(n, dd, e, data){
  91. },
  92. /**
  93. * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
  94. * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
  95. * The default implementation returns this.dropNotAllowed, so it should be
  96. * overridden to provide the proper feedback.
  97. * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  98. * {@link #getTargetFromEvent} for this node)
  99. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  100. * @param {Event} e The event
  101. * @param {Object} data An object containing arbitrary data supplied by the drag source
  102. * @return {String} status The CSS class that communicates the drop status back to the source so that the
  103. * underlying {@link Ext.dd.StatusProxy} can be updated
  104. */
  105. onNodeOver : function(n, dd, e, data){
  106. return this.dropAllowed;
  107. },
  108. /**
  109. * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
  110. * the drop node without dropping. This method has no default implementation and should be overridden to provide
  111. * node-specific processing if necessary.
  112. * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  113. * {@link #getTargetFromEvent} for this node)
  114. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  115. * @param {Event} e The event
  116. * @param {Object} data An object containing arbitrary data supplied by the drag source
  117. */
  118. onNodeOut : function(n, dd, e, data){
  119. },
  120. /**
  121. * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
  122. * the drop node. The default implementation returns false, so it should be overridden to provide the
  123. * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
  124. * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  125. * {@link #getTargetFromEvent} for this node)
  126. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  127. * @param {Event} e The event
  128. * @param {Object} data An object containing arbitrary data supplied by the drag source
  129. * @return {Boolean} True if the drop was valid, else false
  130. */
  131. onNodeDrop : function(n, dd, e, data){
  132. return false;
  133. },
  134. /**
  135. * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
  136. * but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
  137. * it should be overridden to provide the proper feedback if necessary.
  138. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  139. * @param {Event} e The event
  140. * @param {Object} data An object containing arbitrary data supplied by the drag source
  141. * @return {String} status The CSS class that communicates the drop status back to the source so that the
  142. * underlying {@link Ext.dd.StatusProxy} can be updated
  143. */
  144. onContainerOver : function(dd, e, data){
  145. return this.dropNotAllowed;
  146. },
  147. /**
  148. * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
  149. * but not on any of its registered drop nodes. The default implementation returns false, so it should be
  150. * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
  151. * be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
  152. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  153. * @param {Event} e The event
  154. * @param {Object} data An object containing arbitrary data supplied by the drag source
  155. * @return {Boolean} True if the drop was valid, else false
  156. */
  157. onContainerDrop : function(dd, e, data){
  158. return false;
  159. },
  160. /**
  161. * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
  162. * the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
  163. * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
  164. * you should override this method and provide a custom implementation.
  165. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  166. * @param {Event} e The event
  167. * @param {Object} data An object containing arbitrary data supplied by the drag source
  168. * @return {String} status The CSS class that communicates the drop status back to the source so that the
  169. * underlying {@link Ext.dd.StatusProxy} can be updated
  170. */
  171. notifyEnter : function(dd, e, data){
  172. return this.dropNotAllowed;
  173. },
  174. /**
  175. * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
  176. * This method will be called on every mouse movement while the drag source is over the drop zone.
  177. * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
  178. * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
  179. * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
  180. * registered node, it will call {@link #onContainerOver}.
  181. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  182. * @param {Event} e The event
  183. * @param {Object} data An object containing arbitrary data supplied by the drag source
  184. * @return {String} status The CSS class that communicates the drop status back to the source so that the
  185. * underlying {@link Ext.dd.StatusProxy} can be updated
  186. */
  187. notifyOver : function(dd, e, data){
  188. var n = this.getTargetFromEvent(e);
  189. if(!n){ // not over valid drop target
  190. if(this.lastOverNode){
  191. this.onNodeOut(this.lastOverNode, dd, e, data);
  192. this.lastOverNode = null;
  193. }
  194. return this.onContainerOver(dd, e, data);
  195. }
  196. if(this.lastOverNode != n){
  197. if(this.lastOverNode){
  198. this.onNodeOut(this.lastOverNode, dd, e, data);
  199. }
  200. this.onNodeEnter(n, dd, e, data);
  201. this.lastOverNode = n;
  202. }
  203. return this.onNodeOver(n, dd, e, data);
  204. },
  205. /**
  206. * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
  207. * out of the zone without dropping. If the drag source is currently over a registered node, the notification
  208. * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
  209. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  210. * @param {Event} e The event
  211. * @param {Object} data An object containing arbitrary data supplied by the drag zone
  212. */
  213. notifyOut : function(dd, e, data){
  214. if(this.lastOverNode){
  215. this.onNodeOut(this.lastOverNode, dd, e, data);
  216. this.lastOverNode = null;
  217. }
  218. },
  219. /**
  220. * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
  221. * been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
  222. * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
  223. * otherwise it will call {@link #onContainerDrop}.
  224. * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  225. * @param {Event} e The event
  226. * @param {Object} data An object containing arbitrary data supplied by the drag source
  227. * @return {Boolean} True if the drop was valid, else false
  228. */
  229. notifyDrop : function(dd, e, data){
  230. if(this.lastOverNode){
  231. this.onNodeOut(this.lastOverNode, dd, e, data);
  232. this.lastOverNode = null;
  233. }
  234. var n = this.getTargetFromEvent(e);
  235. return n ?
  236. this.onNodeDrop(n, dd, e, data) :
  237. this.onContainerDrop(dd, e, data);
  238. },
  239. // private
  240. triggerCacheRefresh : function(){
  241. Ext.dd.DDM.refreshCache(this.groups);
  242. }
  243. });