123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-grid-header-DropZone'>/**
- </span> * @private
- */
- Ext.define('Ext.grid.header.DropZone', {
- extend: 'Ext.dd.DropZone',
- colHeaderCls: Ext.baseCSSPrefix + 'column-header',
- proxyOffsets: [-4, -9],
- constructor: function(headerCt){
- this.headerCt = headerCt;
- this.ddGroup = this.getDDGroup();
- this.callParent([headerCt.el]);
- },
- getDDGroup: function() {
- return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
- },
- getTargetFromEvent : function(e){
- return e.getTarget('.' + this.colHeaderCls);
- },
- getTopIndicator: function() {
- if (!this.topIndicator) {
- this.topIndicator = Ext.DomHelper.append(Ext.getBody(), {
- cls: "col-move-top",
- html: "&#160;"
- }, true);
- }
- return this.topIndicator;
- },
- getBottomIndicator: function() {
- if (!this.bottomIndicator) {
- this.bottomIndicator = Ext.DomHelper.append(Ext.getBody(), {
- cls: "col-move-bottom",
- html: "&#160;"
- }, true);
- }
- return this.bottomIndicator;
- },
- getLocation: function(e, t) {
- var x = e.getXY()[0],
- region = Ext.fly(t).getRegion(),
- pos, header;
- if ((region.right - x) <= (region.right - region.left) / 2) {
- pos = "after";
- } else {
- pos = "before";
- }
- return {
- pos: pos,
- header: Ext.getCmp(t.id),
- node: t
- };
- },
- positionIndicator: function(draggedHeader, node, e){
- var location = this.getLocation(e, node),
- header = location.header,
- pos = location.pos,
- nextHd = draggedHeader.nextSibling('gridcolumn:not([hidden])'),
- prevHd = draggedHeader.previousSibling('gridcolumn:not([hidden])'),
- topIndicator, bottomIndicator, topAnchor, bottomAnchor,
- topXY, bottomXY, headerCtEl, minX, maxX,
- allDropZones, ln, i, dropZone;
- // Cannot drag beyond non-draggable start column
- if (!header.draggable && header.getIndex() === 0) {
- return false;
- }
- this.lastLocation = location;
- if ((draggedHeader !== header) &&
- ((pos === "before" && nextHd !== header) ||
- (pos === "after" && prevHd !== header)) &&
- !header.isDescendantOf(draggedHeader)) {
- // As we move in between different DropZones that are in the same
- // group (such as the case when in a locked grid), invalidateDrop
- // on the other dropZones.
- allDropZones = Ext.dd.DragDropManager.getRelated(this);
- ln = allDropZones.length;
- i = 0;
- for (; i < ln; i++) {
- dropZone = allDropZones[i];
- if (dropZone !== this && dropZone.invalidateDrop) {
- dropZone.invalidateDrop();
- }
- }
- this.valid = true;
- topIndicator = this.getTopIndicator();
- bottomIndicator = this.getBottomIndicator();
- if (pos === 'before') {
- topAnchor = 'tl';
- bottomAnchor = 'bl';
- } else {
- topAnchor = 'tr';
- bottomAnchor = 'br';
- }
- topXY = header.el.getAnchorXY(topAnchor);
- bottomXY = header.el.getAnchorXY(bottomAnchor);
- // constrain the indicators to the viewable section
- headerCtEl = this.headerCt.el;
- minX = headerCtEl.getLeft();
- maxX = headerCtEl.getRight();
- topXY[0] = Ext.Number.constrain(topXY[0], minX, maxX);
- bottomXY[0] = Ext.Number.constrain(bottomXY[0], minX, maxX);
- // adjust by offsets, this is to center the arrows so that they point
- // at the split point
- topXY[0] -= 4;
- topXY[1] -= 9;
- bottomXY[0] -= 4;
- // position and show indicators
- topIndicator.setXY(topXY);
- bottomIndicator.setXY(bottomXY);
- topIndicator.show();
- bottomIndicator.show();
- // invalidate drop operation and hide indicators
- } else {
- this.invalidateDrop();
- }
- },
- invalidateDrop: function() {
- this.valid = false;
- this.hideIndicators();
- },
- onNodeOver: function(node, dragZone, e, data) {
- var me = this,
- header = me.headerCt,
- doPosition = true,
- from = data.header,
- to;
-
- if (data.header.el.dom === node) {
- doPosition = false;
- } else {
- to = me.getLocation(e, node).header;
- doPosition = (from.ownerCt === to.ownerCt) || (!from.ownerCt.sealed && !to.ownerCt.sealed);
- }
-
- if (doPosition) {
- me.positionIndicator(data.header, node, e);
- } else {
- me.valid = false;
- }
- return me.valid ? me.dropAllowed : me.dropNotAllowed;
- },
- hideIndicators: function() {
- this.getTopIndicator().hide();
- this.getBottomIndicator().hide();
- },
- onNodeOut: function() {
- this.hideIndicators();
- },
- onNodeDrop: function(node, dragZone, e, data) {
- if (this.valid) {
- var dragHeader = data.header,
- lastLocation = this.lastLocation,
- targetHeader = lastLocation.header,
- fromCt = dragHeader.ownerCt,
- fromHeader = dragHeader.up('headercontainer:not(gridcolumn)'),
- localFromIdx = fromCt.items.indexOf(dragHeader), // Container.items is a MixedCollection
- toCt = targetHeader.ownerCt,
- toHeader = targetHeader.up('headercontainer:not(gridcolumn)'),
- localToIdx = toCt.items.indexOf(targetHeader),
- headerCt = this.headerCt,
- fromIdx = headerCt.getHeaderIndex(dragHeader),
- colsToMove = dragHeader.isGroupHeader ? dragHeader.query(':not([isGroupHeader])').length : 1,
- toIdx = headerCt.getHeaderIndex(targetHeader),
- groupCt,
- scrollerOwner;
- // Drop position is to the right of the targetHeader, increment the toIdx correctly
- if (lastLocation.pos === 'after') {
- localToIdx++;
- toIdx += targetHeader.isGroupHeader ? targetHeader.query(':not([isGroupHeader])').length : 1;
- }
- // If we are dragging in between two HeaderContainers that have had the lockable
- // mixin injected we will lock/unlock headers in between sections, and then continue
- // with another execution of onNodeDrop to ensure the header is dropped into the correct group
- if (fromHeader !== toHeader && fromHeader.lockableInjected && toHeader.lockableInjected && toHeader.lockedCt) {
- scrollerOwner = fromCt.up('[scrollerOwner]');
- scrollerOwner.lock(dragHeader, localToIdx);
- // Now that the header has been transferred into the correct HeaderContainer, recurse, and continue the drop operation with the same dragData
- this.onNodeDrop(node, dragZone, e, data);
- } else if (fromHeader !== toHeader && fromHeader.lockableInjected && toHeader.lockableInjected && fromHeader.lockedCt) {
- scrollerOwner = fromCt.up('[scrollerOwner]');
- scrollerOwner.unlock(dragHeader, localToIdx);
- // Now that the header has been transferred into the correct HeaderContainer, recurse, and continue the drop operation with the same dragData
- this.onNodeDrop(node, dragZone, e, data);
- }
-
- // This is a drop within the same HeaderContainer.
- else {
- this.invalidateDrop();
- // If dragging rightwards, then after removal, the insertion index will be less when moving
- // within the same container.
- if ((fromCt === toCt) && (localToIdx > localFromIdx)) {
- // Wer're dragging whole headers, so locally, the adjustment is only one
- localToIdx -= 1;
- }
- // Suspend layouts while we sort all this out.
- Ext.suspendLayouts();
- // Remove dragged header from where it was.
- if (fromCt !== toCt) {
- fromCt.remove(dragHeader, false);
- // Dragged the last header out of the fromCt group... The fromCt group must die
- if (fromCt.isGroupHeader) {
- if (!fromCt.items.getCount()) {
- groupCt = fromCt.ownerCt;
- groupCt.remove(fromCt, false);
- fromCt.el.dom.parentNode.removeChild(fromCt.el.dom);
- }
- }
- }
- // Move dragged header into its drop position
- if (fromCt === toCt) {
- toCt.move(localFromIdx, localToIdx);
- } else {
- toCt.insert(localToIdx, dragHeader);
- }
- // Group headers acquire the aggregate width of their child headers
- // Therefore a child header may not flex; it must contribute a fixed width.
- // But we restore the flex value when moving back into the main header container
- if (toCt.isGroupHeader) {
- // Adjust the width of the "to" group header only if we dragged in from somewhere else.
- if (toCt !== fromCt) {
- dragHeader.savedFlex = dragHeader.flex;
- delete dragHeader.flex;
- dragHeader.width = dragHeader.getWidth();
- }
- } else {
- if (dragHeader.savedFlex) {
- dragHeader.flex = dragHeader.savedFlex;
- delete dragHeader.width;
- }
- }
- // Refresh columns cache in case we remove an emptied group column
- headerCt.purgeCache();
- Ext.resumeLayouts(true);
- headerCt.onHeaderMoved(dragHeader, colsToMove, fromIdx, toIdx);
- // Emptied group header can only be destroyed after the header and grid have been refreshed
- if (!fromCt.items.getCount()) {
- fromCt.destroy();
- }
- }
- }
- }
- });
- </pre>
- </body>
- </html>
|