DropZone2.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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-header-DropZone'>/**
  19. </span> * @private
  20. */
  21. Ext.define('Ext.grid.header.DropZone', {
  22. extend: 'Ext.dd.DropZone',
  23. colHeaderCls: Ext.baseCSSPrefix + 'column-header',
  24. proxyOffsets: [-4, -9],
  25. constructor: function(headerCt){
  26. this.headerCt = headerCt;
  27. this.ddGroup = this.getDDGroup();
  28. this.callParent([headerCt.el]);
  29. },
  30. getDDGroup: function() {
  31. return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
  32. },
  33. getTargetFromEvent : function(e){
  34. return e.getTarget('.' + this.colHeaderCls);
  35. },
  36. getTopIndicator: function() {
  37. if (!this.topIndicator) {
  38. this.topIndicator = Ext.DomHelper.append(Ext.getBody(), {
  39. cls: &quot;col-move-top&quot;,
  40. html: &quot;&amp;#160;&quot;
  41. }, true);
  42. }
  43. return this.topIndicator;
  44. },
  45. getBottomIndicator: function() {
  46. if (!this.bottomIndicator) {
  47. this.bottomIndicator = Ext.DomHelper.append(Ext.getBody(), {
  48. cls: &quot;col-move-bottom&quot;,
  49. html: &quot;&amp;#160;&quot;
  50. }, true);
  51. }
  52. return this.bottomIndicator;
  53. },
  54. getLocation: function(e, t) {
  55. var x = e.getXY()[0],
  56. region = Ext.fly(t).getRegion(),
  57. pos, header;
  58. if ((region.right - x) &lt;= (region.right - region.left) / 2) {
  59. pos = &quot;after&quot;;
  60. } else {
  61. pos = &quot;before&quot;;
  62. }
  63. return {
  64. pos: pos,
  65. header: Ext.getCmp(t.id),
  66. node: t
  67. };
  68. },
  69. positionIndicator: function(draggedHeader, node, e){
  70. var location = this.getLocation(e, node),
  71. header = location.header,
  72. pos = location.pos,
  73. nextHd = draggedHeader.nextSibling('gridcolumn:not([hidden])'),
  74. prevHd = draggedHeader.previousSibling('gridcolumn:not([hidden])'),
  75. topIndicator, bottomIndicator, topAnchor, bottomAnchor,
  76. topXY, bottomXY, headerCtEl, minX, maxX,
  77. allDropZones, ln, i, dropZone;
  78. // Cannot drag beyond non-draggable start column
  79. if (!header.draggable &amp;&amp; header.getIndex() === 0) {
  80. return false;
  81. }
  82. this.lastLocation = location;
  83. if ((draggedHeader !== header) &amp;&amp;
  84. ((pos === &quot;before&quot; &amp;&amp; nextHd !== header) ||
  85. (pos === &quot;after&quot; &amp;&amp; prevHd !== header)) &amp;&amp;
  86. !header.isDescendantOf(draggedHeader)) {
  87. // As we move in between different DropZones that are in the same
  88. // group (such as the case when in a locked grid), invalidateDrop
  89. // on the other dropZones.
  90. allDropZones = Ext.dd.DragDropManager.getRelated(this);
  91. ln = allDropZones.length;
  92. i = 0;
  93. for (; i &lt; ln; i++) {
  94. dropZone = allDropZones[i];
  95. if (dropZone !== this &amp;&amp; dropZone.invalidateDrop) {
  96. dropZone.invalidateDrop();
  97. }
  98. }
  99. this.valid = true;
  100. topIndicator = this.getTopIndicator();
  101. bottomIndicator = this.getBottomIndicator();
  102. if (pos === 'before') {
  103. topAnchor = 'tl';
  104. bottomAnchor = 'bl';
  105. } else {
  106. topAnchor = 'tr';
  107. bottomAnchor = 'br';
  108. }
  109. topXY = header.el.getAnchorXY(topAnchor);
  110. bottomXY = header.el.getAnchorXY(bottomAnchor);
  111. // constrain the indicators to the viewable section
  112. headerCtEl = this.headerCt.el;
  113. minX = headerCtEl.getLeft();
  114. maxX = headerCtEl.getRight();
  115. topXY[0] = Ext.Number.constrain(topXY[0], minX, maxX);
  116. bottomXY[0] = Ext.Number.constrain(bottomXY[0], minX, maxX);
  117. // adjust by offsets, this is to center the arrows so that they point
  118. // at the split point
  119. topXY[0] -= 4;
  120. topXY[1] -= 9;
  121. bottomXY[0] -= 4;
  122. // position and show indicators
  123. topIndicator.setXY(topXY);
  124. bottomIndicator.setXY(bottomXY);
  125. topIndicator.show();
  126. bottomIndicator.show();
  127. // invalidate drop operation and hide indicators
  128. } else {
  129. this.invalidateDrop();
  130. }
  131. },
  132. invalidateDrop: function() {
  133. this.valid = false;
  134. this.hideIndicators();
  135. },
  136. onNodeOver: function(node, dragZone, e, data) {
  137. var me = this,
  138. header = me.headerCt,
  139. doPosition = true,
  140. from = data.header,
  141. to;
  142. if (data.header.el.dom === node) {
  143. doPosition = false;
  144. } else {
  145. to = me.getLocation(e, node).header;
  146. doPosition = (from.ownerCt === to.ownerCt) || (!from.ownerCt.sealed &amp;&amp; !to.ownerCt.sealed);
  147. }
  148. if (doPosition) {
  149. me.positionIndicator(data.header, node, e);
  150. } else {
  151. me.valid = false;
  152. }
  153. return me.valid ? me.dropAllowed : me.dropNotAllowed;
  154. },
  155. hideIndicators: function() {
  156. this.getTopIndicator().hide();
  157. this.getBottomIndicator().hide();
  158. },
  159. onNodeOut: function() {
  160. this.hideIndicators();
  161. },
  162. onNodeDrop: function(node, dragZone, e, data) {
  163. if (this.valid) {
  164. var dragHeader = data.header,
  165. lastLocation = this.lastLocation,
  166. targetHeader = lastLocation.header,
  167. fromCt = dragHeader.ownerCt,
  168. fromHeader = dragHeader.up('headercontainer:not(gridcolumn)'),
  169. localFromIdx = fromCt.items.indexOf(dragHeader), // Container.items is a MixedCollection
  170. toCt = targetHeader.ownerCt,
  171. toHeader = targetHeader.up('headercontainer:not(gridcolumn)'),
  172. localToIdx = toCt.items.indexOf(targetHeader),
  173. headerCt = this.headerCt,
  174. fromIdx = headerCt.getHeaderIndex(dragHeader),
  175. colsToMove = dragHeader.isGroupHeader ? dragHeader.query(':not([isGroupHeader])').length : 1,
  176. toIdx = headerCt.getHeaderIndex(targetHeader),
  177. groupCt,
  178. scrollerOwner;
  179. // Drop position is to the right of the targetHeader, increment the toIdx correctly
  180. if (lastLocation.pos === 'after') {
  181. localToIdx++;
  182. toIdx += targetHeader.isGroupHeader ? targetHeader.query(':not([isGroupHeader])').length : 1;
  183. }
  184. // If we are dragging in between two HeaderContainers that have had the lockable
  185. // mixin injected we will lock/unlock headers in between sections, and then continue
  186. // with another execution of onNodeDrop to ensure the header is dropped into the correct group
  187. if (fromHeader !== toHeader &amp;&amp; fromHeader.lockableInjected &amp;&amp; toHeader.lockableInjected &amp;&amp; toHeader.lockedCt) {
  188. scrollerOwner = fromCt.up('[scrollerOwner]');
  189. scrollerOwner.lock(dragHeader, localToIdx);
  190. // Now that the header has been transferred into the correct HeaderContainer, recurse, and continue the drop operation with the same dragData
  191. this.onNodeDrop(node, dragZone, e, data);
  192. } else if (fromHeader !== toHeader &amp;&amp; fromHeader.lockableInjected &amp;&amp; toHeader.lockableInjected &amp;&amp; fromHeader.lockedCt) {
  193. scrollerOwner = fromCt.up('[scrollerOwner]');
  194. scrollerOwner.unlock(dragHeader, localToIdx);
  195. // Now that the header has been transferred into the correct HeaderContainer, recurse, and continue the drop operation with the same dragData
  196. this.onNodeDrop(node, dragZone, e, data);
  197. }
  198. // This is a drop within the same HeaderContainer.
  199. else {
  200. this.invalidateDrop();
  201. // If dragging rightwards, then after removal, the insertion index will be less when moving
  202. // within the same container.
  203. if ((fromCt === toCt) &amp;&amp; (localToIdx &gt; localFromIdx)) {
  204. // Wer're dragging whole headers, so locally, the adjustment is only one
  205. localToIdx -= 1;
  206. }
  207. // Suspend layouts while we sort all this out.
  208. Ext.suspendLayouts();
  209. // Remove dragged header from where it was.
  210. if (fromCt !== toCt) {
  211. fromCt.remove(dragHeader, false);
  212. // Dragged the last header out of the fromCt group... The fromCt group must die
  213. if (fromCt.isGroupHeader) {
  214. if (!fromCt.items.getCount()) {
  215. groupCt = fromCt.ownerCt;
  216. groupCt.remove(fromCt, false);
  217. fromCt.el.dom.parentNode.removeChild(fromCt.el.dom);
  218. }
  219. }
  220. }
  221. // Move dragged header into its drop position
  222. if (fromCt === toCt) {
  223. toCt.move(localFromIdx, localToIdx);
  224. } else {
  225. toCt.insert(localToIdx, dragHeader);
  226. }
  227. // Group headers acquire the aggregate width of their child headers
  228. // Therefore a child header may not flex; it must contribute a fixed width.
  229. // But we restore the flex value when moving back into the main header container
  230. if (toCt.isGroupHeader) {
  231. // Adjust the width of the &quot;to&quot; group header only if we dragged in from somewhere else.
  232. if (toCt !== fromCt) {
  233. dragHeader.savedFlex = dragHeader.flex;
  234. delete dragHeader.flex;
  235. dragHeader.width = dragHeader.getWidth();
  236. }
  237. } else {
  238. if (dragHeader.savedFlex) {
  239. dragHeader.flex = dragHeader.savedFlex;
  240. delete dragHeader.width;
  241. }
  242. }
  243. // Refresh columns cache in case we remove an emptied group column
  244. headerCt.purgeCache();
  245. Ext.resumeLayouts(true);
  246. headerCt.onHeaderMoved(dragHeader, colsToMove, fromIdx, toIdx);
  247. // Emptied group header can only be destroyed after the header and grid have been refreshed
  248. if (!fromCt.items.getCount()) {
  249. fromCt.destroy();
  250. }
  251. }
  252. }
  253. }
  254. });
  255. </pre>
  256. </body>
  257. </html>