DragDrop.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/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-grid-plugin-DragDrop'>/**
  19. </span> * This plugin provides drag and/or drop functionality for a GridView.
  20. *
  21. * It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a {@link
  22. * Ext.grid.View GridView} and loads the data object which is passed to a cooperating {@link Ext.dd.DragZone DragZone}'s
  23. * methods with the following properties:
  24. *
  25. * - `copy` : Boolean
  26. *
  27. * The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` _and_
  28. * the control key was pressed when the drag operation was begun.
  29. *
  30. * - `view` : GridView
  31. *
  32. * The source GridView from which the drag originated.
  33. *
  34. * - `ddel` : HtmlElement
  35. *
  36. * The drag proxy element which moves with the mouse
  37. *
  38. * - `item` : HtmlElement
  39. *
  40. * The GridView node upon which the mousedown event was registered.
  41. *
  42. * - `records` : Array
  43. *
  44. * An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
  45. *
  46. * It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
  47. * members of the same ddGroup which processes such data objects.
  48. *
  49. * Adding this plugin to a view means that two new events may be fired from the client GridView, `{@link #beforedrop
  50. * beforedrop}` and `{@link #drop drop}`
  51. *
  52. * @example
  53. * Ext.create('Ext.data.Store', {
  54. * storeId:'simpsonsStore',
  55. * fields:['name'],
  56. * data: [[&quot;Lisa&quot;], [&quot;Bart&quot;], [&quot;Homer&quot;], [&quot;Marge&quot;]],
  57. * proxy: {
  58. * type: 'memory',
  59. * reader: 'array'
  60. * }
  61. * });
  62. *
  63. * Ext.create('Ext.grid.Panel', {
  64. * store: 'simpsonsStore',
  65. * columns: [
  66. * {header: 'Name', dataIndex: 'name', flex: true}
  67. * ],
  68. * viewConfig: {
  69. * plugins: {
  70. * ptype: 'gridviewdragdrop',
  71. * dragText: 'Drag and drop to reorganize'
  72. * }
  73. * },
  74. * height: 200,
  75. * width: 400,
  76. * renderTo: Ext.getBody()
  77. * });
  78. */
  79. Ext.define('Ext.grid.plugin.DragDrop', {
  80. extend: 'Ext.AbstractPlugin',
  81. alias: 'plugin.gridviewdragdrop',
  82. uses: [
  83. 'Ext.view.DragZone',
  84. 'Ext.grid.ViewDropZone'
  85. ],
  86. <span id='Ext-grid-plugin-DragDrop-event-beforedrop'> /**
  87. </span> * @event beforedrop
  88. * **This event is fired through the GridView. Add listeners to the GridView object**
  89. *
  90. * Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the GridView.
  91. *
  92. * @param {HTMLElement} node The GridView node **if any** over which the mouse was positioned.
  93. *
  94. * Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
  95. * back to the point from which the drag began.
  96. *
  97. * Returning `0` To this event signals that the data transfer operation should not take place, but that the gesture
  98. * was valid, and that the repair operation should not take place.
  99. *
  100. * Any other return value continues with the data transfer operation.
  101. *
  102. * @param {Object} data The data object gathered at mousedown time by the cooperating {@link Ext.dd.DragZone
  103. * DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following properties:
  104. *
  105. * - copy : Boolean
  106. *
  107. * The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` and
  108. * the control key was pressed when the drag operation was begun
  109. *
  110. * - view : GridView
  111. *
  112. * The source GridView from which the drag originated.
  113. *
  114. * - ddel : HtmlElement
  115. *
  116. * The drag proxy element which moves with the mouse
  117. *
  118. * - item : HtmlElement
  119. *
  120. * The GridView node upon which the mousedown event was registered.
  121. *
  122. * - records : Array
  123. *
  124. * An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
  125. *
  126. * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
  127. *
  128. * @param {String} dropPosition `&quot;before&quot;` or `&quot;after&quot;` depending on whether the mouse is above or below the midline
  129. * of the node.
  130. *
  131. * @param {Function} dropFunction
  132. *
  133. * A function to call to complete the data transfer operation and either move or copy Model instances from the
  134. * source View's Store to the destination View's Store.
  135. *
  136. * This is useful when you want to perform some kind of asynchronous processing before confirming the drop, such as
  137. * an {@link Ext.window.MessageBox#confirm confirm} call, or an Ajax request.
  138. *
  139. * Return `0` from this event handler, and call the `dropFunction` at any time to perform the data transfer.
  140. */
  141. <span id='Ext-grid-plugin-DragDrop-event-drop'> /**
  142. </span> * @event drop
  143. * **This event is fired through the GridView. Add listeners to the GridView object** Fired when a drop operation
  144. * has been completed and the data has been moved or copied.
  145. *
  146. * @param {HTMLElement} node The GridView node **if any** over which the mouse was positioned.
  147. *
  148. * @param {Object} data The data object gathered at mousedown time by the cooperating {@link Ext.dd.DragZone
  149. * DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following properties:
  150. *
  151. * - copy : Boolean
  152. *
  153. * The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` and
  154. * the control key was pressed when the drag operation was begun
  155. *
  156. * - view : GridView
  157. *
  158. * The source GridView from which the drag originated.
  159. *
  160. * - ddel : HtmlElement
  161. *
  162. * The drag proxy element which moves with the mouse
  163. *
  164. * - item : HtmlElement
  165. *
  166. * The GridView node upon which the mousedown event was registered.
  167. *
  168. * - records : Array
  169. *
  170. * An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
  171. *
  172. * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
  173. *
  174. * @param {String} dropPosition `&quot;before&quot;` or `&quot;after&quot;` depending on whether the mouse is above or below the midline
  175. * of the node.
  176. */
  177. //&lt;locale&gt;
  178. <span id='Ext-grid-plugin-DragDrop-cfg-dragText'> /**
  179. </span> * @cfg
  180. * The text to show while dragging.
  181. *
  182. * Two placeholders can be used in the text:
  183. *
  184. * - `{0}` The number of selected items.
  185. * - `{1}` 's' when more than 1 items (only useful for English).
  186. */
  187. dragText : '{0} selected row{1}',
  188. //&lt;/locale&gt;
  189. <span id='Ext-grid-plugin-DragDrop-cfg-ddGroup'> /**
  190. </span> * @cfg {String} ddGroup
  191. * A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and
  192. * DropZone used by this plugin will only interact with other drag drop objects in the same group.
  193. */
  194. ddGroup : &quot;GridDD&quot;,
  195. <span id='Ext-grid-plugin-DragDrop-cfg-dragGroup'> /**
  196. </span> * @cfg {String} dragGroup
  197. * The ddGroup to which the DragZone will belong.
  198. *
  199. * This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other
  200. * Drag/DropZones which are members of the same ddGroup.
  201. */
  202. <span id='Ext-grid-plugin-DragDrop-cfg-dropGroup'> /**
  203. </span> * @cfg {String} dropGroup
  204. * The ddGroup to which the DropZone will belong.
  205. *
  206. * This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other
  207. * Drag/DropZones which are members of the same ddGroup.
  208. */
  209. <span id='Ext-grid-plugin-DragDrop-cfg-enableDrop'> /**
  210. </span> * @cfg {Boolean} enableDrop
  211. * False to disallow the View from accepting drop gestures.
  212. */
  213. enableDrop: true,
  214. <span id='Ext-grid-plugin-DragDrop-cfg-enableDrag'> /**
  215. </span> * @cfg {Boolean} enableDrag
  216. * False to disallow dragging items from the View.
  217. */
  218. enableDrag: true,
  219. init : function(view) {
  220. view.on('render', this.onViewRender, this, {single: true});
  221. },
  222. <span id='Ext-grid-plugin-DragDrop-method-destroy'> /**
  223. </span> * @private
  224. * AbstractComponent calls destroy on all its plugins at destroy time.
  225. */
  226. destroy: function() {
  227. Ext.destroy(this.dragZone, this.dropZone);
  228. },
  229. enable: function() {
  230. var me = this;
  231. if (me.dragZone) {
  232. me.dragZone.unlock();
  233. }
  234. if (me.dropZone) {
  235. me.dropZone.unlock();
  236. }
  237. me.callParent();
  238. },
  239. disable: function() {
  240. var me = this;
  241. if (me.dragZone) {
  242. me.dragZone.lock();
  243. }
  244. if (me.dropZone) {
  245. me.dropZone.lock();
  246. }
  247. me.callParent();
  248. },
  249. onViewRender : function(view) {
  250. var me = this;
  251. if (me.enableDrag) {
  252. me.dragZone = new Ext.view.DragZone({
  253. view: view,
  254. ddGroup: me.dragGroup || me.ddGroup,
  255. dragText: me.dragText
  256. });
  257. }
  258. if (me.enableDrop) {
  259. me.dropZone = new Ext.grid.ViewDropZone({
  260. view: view,
  261. ddGroup: me.dropGroup || me.ddGroup
  262. });
  263. }
  264. }
  265. });</pre>
  266. </body>
  267. </html>