extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/dd/DragSource.js

@@ -0,0 +1,392 @@
+/**
+ * A simple class that provides the basic implementation needed to make any element draggable.
+ */
+Ext.define('Ext.dd.DragSource', {
+    extend: 'Ext.dd.DDProxy',
+    requires: [
+        'Ext.dd.StatusProxy',
+        'Ext.dd.DragDropManager'
+    ],
+
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
+     * interact with other drag drop objects in the same group.
+     */
+
+    /**
+     * @cfg {String} dropAllowed
+     * The CSS class returned to the drag source when drop is allowed.
+     */
+    dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
+    /**
+     * @cfg {String} dropNotAllowed
+     * The CSS class returned to the drag source when drop is not allowed.
+     */
+    dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
+
+    /**
+     * @cfg {Boolean} animRepair
+     * If true, animates the proxy element back to the position of the handle element used to trigger the drag.
+     */
+    animRepair: true,
+
+    /**
+     * @cfg {String} repairHighlightColor
+     * The color to use when visually highlighting the drag source in the afterRepair
+     * method after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without
+     * a preceding '#'.
+     */
+    repairHighlightColor: 'c3daf9',
+
+    /**
+     * Creates new drag-source.
+     * @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
+     * @param {Object} config (optional) Config object.
+     */
+    constructor: function(el, config) {
+        this.el = Ext.get(el);
+        if(!this.dragData){
+            this.dragData = {};
+        }
+
+        Ext.apply(this, config);
+
+        if(!this.proxy){
+            this.proxy = new Ext.dd.StatusProxy({
+                id: this.el.id + '-drag-status-proxy',
+                animRepair: this.animRepair
+            });
+        }
+        this.callParent([this.el.dom, this.ddGroup || this.group,
+              {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}]);
+
+        this.dragging = false;
+    },
+
+    /**
+     * Returns the data object associated with this drag source
+     * @return {Object} data An object containing arbitrary data
+     */
+    getDragData : function(e){
+        return this.dragData;
+    },
+
+    // private
+    onDragEnter : function(e, id){
+        var target = Ext.dd.DragDropManager.getDDById(id),
+            status;
+        this.cachedTarget = target;
+        if (this.beforeDragEnter(target, e, id) !== false) {
+            if (target.isNotifyTarget) {
+                status = target.notifyEnter(this, e, this.dragData);
+                this.proxy.setStatus(status);
+            } else {
+                this.proxy.setStatus(this.dropAllowed);
+            }
+
+            if (this.afterDragEnter) {
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * when the dragged item enters the drop target by providing an implementation.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dragged element
+                 * @method afterDragEnter
+                 */
+                this.afterDragEnter(target, e, id);
+            }
+        }
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action
+     * before the dragged item enters the drop target and optionally cancel the onDragEnter.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    beforeDragEnter: function(target, e, id) {
+        return true;
+    },
+
+    // private
+    onDragOver: function(e, id) {
+        var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id),
+            status;
+        if (this.beforeDragOver(target, e, id) !== false) {
+            if(target.isNotifyTarget){
+                status = target.notifyOver(this, e, this.dragData);
+                this.proxy.setStatus(status);
+            }
+
+            if (this.afterDragOver) {
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * while the dragged item is over the drop target by providing an implementation.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dragged element
+                 * @method afterDragOver
+                 */
+                this.afterDragOver(target, e, id);
+            }
+        }
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action
+     * while the dragged item is over the drop target and optionally cancel the onDragOver.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    beforeDragOver: function(target, e, id) {
+        return true;
+    },
+
+    // private
+    onDragOut: function(e, id) {
+        var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
+        if (this.beforeDragOut(target, e, id) !== false) {
+            if (target.isNotifyTarget) {
+                target.notifyOut(this, e, this.dragData);
+            }
+            this.proxy.reset();
+            if (this.afterDragOut) {
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * after the dragged item is dragged out of the target without dropping.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dragged element
+                 * @method afterDragOut
+                 */
+                this.afterDragOut(target, e, id);
+            }
+        }
+        this.cachedTarget = null;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action before the dragged
+     * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    beforeDragOut: function(target, e, id){
+        return true;
+    },
+
+    // private
+    onDragDrop: function(e, id){
+        var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
+        if (this.beforeDragDrop(target, e, id) !== false) {
+            if (target.isNotifyTarget) {
+                if (target.notifyDrop(this, e, this.dragData) !== false) { // valid drop?
+                    this.onValidDrop(target, e, id);
+                } else {
+                    this.onInvalidDrop(target, e, id);
+                }
+            } else {
+                this.onValidDrop(target, e, id);
+            }
+
+            if (this.afterDragDrop) {
+                /**
+                 * An empty function by default, but provided so that you can perform a custom action
+                 * after a valid drag drop has occurred by providing an implementation.
+                 * @param {Ext.dd.DragDrop} target The drop target
+                 * @param {Event} e The event object
+                 * @param {String} id The id of the dropped element
+                 * @method afterDragDrop
+                 */
+                this.afterDragDrop(target, e, id);
+            }
+        }
+        delete this.cachedTarget;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action before the dragged
+     * item is dropped onto the target and optionally cancel the onDragDrop.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
+     */
+    beforeDragDrop: function(target, e, id){
+        return true;
+    },
+
+    // private
+    onValidDrop: function(target, e, id){
+        this.hideProxy();
+        if(this.afterValidDrop){
+            /**
+             * An empty function by default, but provided so that you can perform a custom action
+             * after a valid drop has occurred by providing an implementation.
+             * @param {Object} target The target DD
+             * @param {Event} e The event object
+             * @param {String} id The id of the dropped element
+             * @method afterValidDrop
+             */
+            this.afterValidDrop(target, e, id);
+        }
+    },
+
+    // private
+    getRepairXY: function(e, data){
+        return this.el.getXY();
+    },
+
+    // private
+    onInvalidDrop: function(target, e, id) {
+        this.beforeInvalidDrop(target, e, id);
+        if (this.cachedTarget) {
+            if(this.cachedTarget.isNotifyTarget){
+                this.cachedTarget.notifyOut(this, e, this.dragData);
+            }
+            this.cacheTarget = null;
+        }
+        this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
+
+        if (this.afterInvalidDrop) {
+            /**
+             * An empty function by default, but provided so that you can perform a custom action
+             * after an invalid drop has occurred by providing an implementation.
+             * @param {Event} e The event object
+             * @param {String} id The id of the dropped element
+             * @method afterInvalidDrop
+             */
+            this.afterInvalidDrop(e, id);
+        }
+    },
+
+    // private
+    afterRepair: function() {
+        var me = this;
+        if (Ext.enableFx) {
+            me.el.highlight(me.repairHighlightColor);
+        }
+        me.dragging = false;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action after an invalid
+     * drop has occurred.
+     * @param {Ext.dd.DragDrop} target The drop target
+     * @param {Event} e The event object
+     * @param {String} id The id of the dragged element
+     * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
+     */
+    beforeInvalidDrop: function(target, e, id) {
+        return true;
+    },
+
+    // private
+    handleMouseDown: function(e) {
+        if (this.dragging) {
+            return;
+        }
+        var data = this.getDragData(e);
+        if (data && this.onBeforeDrag(data, e) !== false) {
+            this.dragData = data;
+            this.proxy.stop();
+            this.callParent(arguments);
+        }
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action before the initial
+     * drag event begins and optionally cancel it.
+     * @param {Object} data An object containing arbitrary data to be shared with drop targets
+     * @param {Event} e The event object
+     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+     */
+    onBeforeDrag: function(data, e){
+        return true;
+    },
+
+    /**
+     * An empty function by default, but provided so that you can perform a custom action once the initial
+     * drag event has begun.  The drag cannot be canceled from this function.
+     * @param {Number} x The x position of the click on the dragged object
+     * @param {Number} y The y position of the click on the dragged object
+     * @method
+     */
+    onStartDrag: Ext.emptyFn,
+
+    alignElWithMouse: function() {
+        this.proxy.ensureAttachedToBody(true);
+        return this.callParent(arguments);
+    },
+
+    // private override
+    startDrag: function(x, y) {
+        this.proxy.reset();
+        this.proxy.hidden = false;
+        this.dragging = true;
+        this.proxy.update("");
+        this.onInitDrag(x, y);
+        this.proxy.show();
+    },
+
+    // private
+    onInitDrag: function(x, y) {
+        var clone = this.el.dom.cloneNode(true);
+        clone.id = Ext.id(); // prevent duplicate ids
+        this.proxy.update(clone);
+        this.onStartDrag(x, y);
+        return true;
+    },
+
+    /**
+     * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
+     * @return {Ext.dd.StatusProxy} proxy The StatusProxy
+     */
+    getProxy: function() {
+        return this.proxy;
+    },
+
+    /**
+     * Hides the drag source's {@link Ext.dd.StatusProxy}
+     */
+    hideProxy: function() {
+        this.proxy.hide();
+        this.proxy.reset(true);
+        this.dragging = false;
+    },
+
+    // private
+    triggerCacheRefresh: function() {
+        Ext.dd.DDM.refreshCache(this.groups);
+    },
+
+    // private - override to prevent hiding
+    b4EndDrag: function(e) {
+    },
+
+    // private - override to prevent moving
+    endDrag : function(e){
+        this.onEndDrag(this.dragData, e);
+    },
+
+    // private
+    onEndDrag : function(data, e){
+    },
+
+    // private - pin to cursor
+    autoOffset : function(x, y) {
+        this.setDelta(-12, -20);
+    },
+
+    destroy: function(){
+        this.callParent();
+        Ext.destroy(this.proxy);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/dd/DragTracker.js

@@ -0,0 +1,562 @@
+/**
+ * A DragTracker listens for drag events on an Element and fires events at the start and end of the drag,
+ * as well as during the drag. This is useful for components such as {@link Ext.slider.Multi}, where there is
+ * an element that can be dragged around to change the Slider's value.
+ *
+ * DragTracker provides a series of template methods that should be overridden to provide functionality
+ * in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd.
+ * See {@link Ext.slider.Multi}'s initEvents function for an example implementation.
+ */
+Ext.define('Ext.dd.DragTracker', {
+
+    uses: ['Ext.util.Region'],
+
+    mixins: {
+        observable: 'Ext.util.Observable'
+    },
+
+    /**
+     * @property {Boolean} active
+     * Indicates whether the user is currently dragging this tracker.
+     * @readonly
+     */
+    active: false,
+
+    /**
+     * @property {HTMLElement} dragTarget
+     * The element being dragged.
+     *
+     * Only valid during drag operations.
+     *
+     * If the {@link #delegate} option is used, this will be the delegate element which was mousedowned.
+     * @readonly
+     */
+
+    /**
+     * @cfg {Boolean} trackOver
+     * Set to true to fire mouseover and mouseout events when the mouse enters or leaves the target element.
+     *
+     * This is implicitly set when an {@link #overCls} is specified.
+     *
+     * If the {@link #delegate} option is used, these events fire only when a delegate element is entered of left.
+     */
+    trackOver: false,
+
+    /**
+     * @cfg {String} overCls
+     * A CSS class to add to the DragTracker's target element when the element (or, if the {@link #delegate}
+     * option is used, when a delegate element) is mouseovered.
+     *
+     * If the {@link #delegate} option is used, these events fire only when a delegate element is entered of left.
+     */
+
+    /**
+     * @cfg {Ext.util.Region/Ext.Element} constrainTo
+     * A {@link Ext.util.Region Region} (Or an element from which a Region measurement will be read)
+     * which is used to constrain the result of the {@link #getOffset} call.
+     *
+     * This may be set any time during the DragTracker's lifecycle to set a dynamic constraining region.
+     */
+
+    /**
+     * @cfg {Number} tolerance
+     * Number of pixels the drag target must be moved before dragging is
+     * considered to have started.
+     */
+    tolerance: 5,
+
+    /**
+     * @cfg {Boolean/Number} autoStart
+     * Specify `true` to defer trigger start by 1000 ms.
+     * Specify a Number for the number of milliseconds to defer trigger start.
+     */
+    autoStart: false,
+
+    /**
+     * @cfg {String} delegate
+     * A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the DragTracker's encapsulating
+     * Element which are the tracked elements. This limits tracking to only begin when the matching elements are mousedowned.
+     *
+     * This may also be a specific child element within the DragTracker's encapsulating element to use as the tracked element.
+     */
+
+    /**
+     * @cfg {Boolean} [preventDefault=true]
+     * Specify `false` to enable default actions on onMouseDown events.
+     */
+
+    /**
+     * @cfg {Boolean} [stopEvent=false]
+     * Specify `true` to stop the `mousedown` event from bubbling to outer listeners from the target element (or its delegates).
+     */
+
+    constructor : function(config){
+        Ext.apply(this, config);
+        this.addEvents(
+            /**
+             * @event mouseover
+             * Fires when the mouse enters the DragTracker's target element (or if {@link #delegate} is
+             * used, when the mouse enters a delegate element).
+             *
+             * **Only available when {@link #trackOver} is `true`**
+             *
+             * @param {Object} this
+             * @param {Object} e event object
+             * @param {HTMLElement} target The element mouseovered.
+             */
+            'mouseover',
+
+            /**
+             * @event mouseout
+             * Fires when the mouse exits the DragTracker's target element (or if {@link #delegate} is
+             * used, when the mouse exits a delegate element).
+             * 
+             * **Only available when {@link #trackOver} is `true`**
+             *
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'mouseout',
+
+            /**
+             * @event mousedown
+             * Fires when the mouse button is pressed down, but before a drag operation begins. The
+             * drag operation begins after either the mouse has been moved by {@link #tolerance} pixels,
+             * or after the {@link #autoStart} timer fires.
+             *
+             * Return false to veto the drag operation.
+             *
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'mousedown',
+
+            /**
+             * @event mouseup
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'mouseup',
+
+            /**
+             * @event mousemove
+             * Fired when the mouse is moved. Returning false cancels the drag operation.
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'mousemove',
+
+            /**
+             * @event beforestart
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'beforedragstart',
+
+            /**
+             * @event dragstart
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'dragstart',
+
+            /**
+             * @event dragend
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'dragend',
+
+            /**
+             * @event drag
+             * @param {Object} this
+             * @param {Object} e event object
+             */
+            'drag'
+        );
+
+        this.dragRegion = new Ext.util.Region(0,0,0,0);
+
+        if (this.el) {
+            this.initEl(this.el);
+        }
+
+        // Dont pass the config so that it is not applied to 'this' again
+        this.mixins.observable.constructor.call(this);
+        if (this.disabled) {
+            this.disable();
+        }
+
+    },
+
+    /**
+     * Initializes the DragTracker on a given element.
+     * @param {Ext.Element/HTMLElement} el The element
+     */
+    initEl: function(el) {
+        this.el = Ext.get(el);
+
+        // The delegate option may also be an element on which to listen
+        this.handle = Ext.get(this.delegate);
+
+        // If delegate specified an actual element to listen on, we do not use the delegate listener option
+        this.delegate = this.handle ? undefined : this.delegate;
+
+        if (!this.handle) {
+            this.handle = this.el;
+        }
+
+        // Add a mousedown listener which reacts only on the elements targeted by the delegate config.
+        // We process mousedown to begin tracking.
+        this.mon(this.handle, {
+            mousedown: this.onMouseDown,
+            delegate: this.delegate,
+            scope: this
+        });
+
+        // If configured to do so, track mouse entry and exit into the target (or delegate).
+        // The mouseover and mouseout CANNOT be replaced with mouseenter and mouseleave
+        // because delegate cannot work with those pseudoevents. Entry/exit checking is done in the handler.
+        if (this.trackOver || this.overCls) {
+            this.mon(this.handle, {
+                mouseover: this.onMouseOver,
+                mouseout: this.onMouseOut,
+                delegate: this.delegate,
+                scope: this
+            });
+        }
+    },
+
+    disable: function() {
+        this.disabled = true;
+    },
+
+    enable: function() {
+        this.disabled = false;
+    },
+
+    destroy : function() {
+        this.clearListeners();
+        delete this.el;
+    },
+
+    // When the pointer enters a tracking element, fire a mouseover if the mouse entered from outside.
+    // This is mouseenter functionality, but we cannot use mouseenter because we are using "delegate" to filter mouse targets
+    onMouseOver: function(e, target) {
+        var me = this;
+        if (!me.disabled) {
+            if (Ext.EventManager.contains(e) || me.delegate) {
+                me.mouseIsOut = false;
+                if (me.overCls) {
+                    me.el.addCls(me.overCls);
+                }
+                me.fireEvent('mouseover', me, e, me.delegate ? e.getTarget(me.delegate, target) : me.handle);
+            }
+        }
+    },
+
+    // When the pointer exits a tracking element, fire a mouseout.
+    // This is mouseleave functionality, but we cannot use mouseleave because we are using "delegate" to filter mouse targets
+    onMouseOut: function(e) {
+        if (this.mouseIsDown) {
+            this.mouseIsOut = true;
+        } else {
+            if (this.overCls) {
+                this.el.removeCls(this.overCls);
+            }
+            this.fireEvent('mouseout', this, e);
+        }
+    },
+
+    onMouseDown: function(e, target){
+        // If this is disabled, or the mousedown has been processed by an upstream DragTracker, return
+        if (this.disabled ||e.dragTracked) {
+            return;
+        }
+
+        // This information should be available in mousedown listener and onBeforeStart implementations
+        this.dragTarget = this.delegate ? target : this.handle.dom;
+        this.startXY = this.lastXY = e.getXY();
+        this.startRegion = Ext.fly(this.dragTarget).getRegion();
+
+        if (this.fireEvent('mousedown', this, e) === false ||
+            this.fireEvent('beforedragstart', this, e) === false ||
+            this.onBeforeStart(e) === false) {
+            return;
+        }
+
+        // Track when the mouse is down so that mouseouts while the mouse is down are not processed.
+        // The onMouseOut method will only ever be called after mouseup.
+        this.mouseIsDown = true;
+
+        // Flag for downstream DragTracker instances that the mouse is being tracked.
+        e.dragTracked = true;
+
+        if (this.preventDefault !== false) {
+            e.preventDefault();
+        }
+        Ext.getDoc().on({
+            scope: this,
+            mouseup: this.onMouseUp,
+            mousemove: this.onMouseMove,
+            selectstart: this.stopSelect
+        });
+        if (this.autoStart) {
+            this.timer =  Ext.defer(this.triggerStart, this.autoStart === true ? 1000 : this.autoStart, this, [e]);
+        }
+    },
+
+    onMouseMove: function(e, target){
+        // BrowserBug: IE hack to see if button was released outside of window.
+        // Needed in IE6-9 in quirks and strictmode
+        if (this.active && Ext.isIE && !e.browserEvent.button) {
+            e.preventDefault();
+            this.onMouseUp(e);
+            return;
+        }
+
+        e.preventDefault();
+        var xy = e.getXY(),
+            s = this.startXY;
+
+        this.lastXY = xy;
+        if (!this.active) {
+            if (Math.max(Math.abs(s[0]-xy[0]), Math.abs(s[1]-xy[1])) > this.tolerance) {
+                this.triggerStart(e);
+            } else {
+                return;
+            }
+        }
+
+        // Returning false from a mousemove listener deactivates
+        if (this.fireEvent('mousemove', this, e) === false) {
+            this.onMouseUp(e);
+        } else {
+            this.onDrag(e);
+            this.fireEvent('drag', this, e);
+        }
+    },
+
+    onMouseUp: function(e) {
+        // Clear the flag which ensures onMouseOut fires only after the mouse button
+        // is lifted if the mouseout happens *during* a drag.
+        this.mouseIsDown = false;
+
+        // If we mouseouted the el *during* the drag, the onMouseOut method will not have fired. Ensure that it gets processed.
+        if (this.mouseIsOut) {
+            this.mouseIsOut = false;
+            this.onMouseOut(e);
+        }
+        e.preventDefault();
+        this.fireEvent('mouseup', this, e);
+        this.endDrag(e);
+    },
+
+    /**
+     * @private
+     * Stop the drag operation, and remove active mouse listeners.
+     */
+    endDrag: function(e) {
+        var doc = Ext.getDoc(),
+        wasActive = this.active;
+
+        doc.un('mousemove', this.onMouseMove, this);
+        doc.un('mouseup', this.onMouseUp, this);
+        doc.un('selectstart', this.stopSelect, this);
+        this.clearStart();
+        this.active = false;
+        if (wasActive) {
+            this.onEnd(e);
+            this.fireEvent('dragend', this, e);
+        }
+        // Private property calculated when first required and only cached during a drag
+        delete this._constrainRegion;
+
+        // Remove flag from event singleton.  Using "Ext.EventObject" here since "endDrag" is called directly in some cases without an "e" param
+        delete Ext.EventObject.dragTracked;
+    },
+
+    triggerStart: function(e) {
+        this.clearStart();
+        this.active = true;
+        this.onStart(e);
+        this.fireEvent('dragstart', this, e);
+    },
+
+    clearStart : function() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            delete this.timer;
+        }
+    },
+
+    stopSelect : function(e) {
+        e.stopEvent();
+        return false;
+    },
+
+    /**
+     * Template method which should be overridden by each DragTracker instance. Called when the user first clicks and
+     * holds the mouse button down. Return false to disallow the drag
+     * @param {Ext.EventObject} e The event object
+     * @template
+     */
+    onBeforeStart : function(e) {
+
+    },
+
+    /**
+     * Template method which should be overridden by each DragTracker instance. Called when a drag operation starts
+     * (e.g. the user has moved the tracked element beyond the specified tolerance)
+     * @param {Ext.EventObject} e The event object
+     * @template
+     */
+    onStart : function(xy) {
+
+    },
+
+    /**
+     * Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.
+     * @param {Ext.EventObject} e The event object
+     * @template
+     */
+    onDrag : function(e) {
+
+    },
+
+    /**
+     * Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed
+     * (e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)
+     * @param {Ext.EventObject} e The event object
+     * @template
+     */
+    onEnd : function(e) {
+
+    },
+
+    /**
+     * Returns the drag target. This is usually the DragTracker's encapsulating element.
+     *
+     * If the {@link #delegate} option is being used, this may be a child element which matches the
+     * {@link #delegate} selector.
+     *
+     * @return {Ext.Element} The element currently being tracked.
+     */
+    getDragTarget : function(){
+        return this.dragTarget;
+    },
+
+    /**
+     * @private
+     * @returns {Ext.Element} The DragTracker's encapsulating element.
+     */
+    getDragCt : function(){
+        return this.el;
+    },
+
+    /**
+     * @private
+     * Return the Region into which the drag operation is constrained.
+     * Either the XY pointer itself can be constrained, or the dragTarget element
+     * The private property _constrainRegion is cached until onMouseUp
+     */
+    getConstrainRegion: function() {
+        if (this.constrainTo) {
+            if (this.constrainTo instanceof Ext.util.Region) {
+                return this.constrainTo;
+            }
+            if (!this._constrainRegion) {
+                this._constrainRegion = Ext.fly(this.constrainTo).getViewRegion();
+            }
+        } else {
+            if (!this._constrainRegion) {
+                this._constrainRegion = this.getDragCt().getViewRegion();
+            }
+        }
+        return this._constrainRegion;
+    },
+
+    getXY : function(constrain){
+        return constrain ? this.constrainModes[constrain](this, this.lastXY) : this.lastXY;
+    },
+
+    /**
+     * Returns the X, Y offset of the current mouse position from the mousedown point.
+     *
+     * This method may optionally constrain the real offset values, and returns a point coerced in one
+     * of two modes:
+     *
+     *  - `point`
+     *    The current mouse position is coerced into the constrainRegion and the resulting position is returned.
+     *  - `dragTarget`
+     *    The new {@link Ext.util.Region Region} of the {@link #getDragTarget dragTarget} is calculated
+     *    based upon the current mouse position, and then coerced into the constrainRegion. The returned
+     *    mouse position is then adjusted by the same delta as was used to coerce the region.\
+     *
+     * @param constrainMode {String} (Optional) If omitted the true mouse position is returned. May be passed
+     * as `point` or `dragTarget`. See above.
+     * @returns {Number[]} The `X, Y` offset from the mousedown point, optionally constrained.
+     */
+    getOffset : function(constrain){
+        var xy = this.getXY(constrain),
+            s = this.startXY;
+
+        return [xy[0]-s[0], xy[1]-s[1]];
+    },
+
+    constrainModes: {
+        // Constrain the passed point to within the constrain region
+        point: function(me, xy) {
+            var dr = me.dragRegion,
+                constrainTo = me.getConstrainRegion();
+
+            // No constraint
+            if (!constrainTo) {
+                return xy;
+            }
+
+            dr.x = dr.left = dr[0] = dr.right = xy[0];
+            dr.y = dr.top = dr[1] = dr.bottom = xy[1];
+            dr.constrainTo(constrainTo);
+
+            return [dr.left, dr.top];
+        },
+
+        // Constrain the dragTarget to within the constrain region. Return the passed xy adjusted by the same delta.
+        dragTarget: function(me, xy) {
+            var s = me.startXY,
+                dr = me.startRegion.copy(),
+                constrainTo = me.getConstrainRegion(),
+                adjust;
+
+            // No constraint
+            if (!constrainTo) {
+                return xy;
+            }
+
+            // See where the passed XY would put the dragTarget if translated by the unconstrained offset.
+            // If it overflows, we constrain the passed XY to bring the potential
+            // region back within the boundary.
+            dr.translateBy(xy[0]-s[0], xy[1]-s[1]);
+
+            // Constrain the X coordinate by however much the dragTarget overflows
+            if (dr.right > constrainTo.right) {
+                xy[0] += adjust = (constrainTo.right - dr.right);    // overflowed the right
+                dr.left += adjust;
+            }
+            if (dr.left < constrainTo.left) {
+                xy[0] += (constrainTo.left - dr.left);      // overflowed the left
+            }
+
+            // Constrain the Y coordinate by however much the dragTarget overflows
+            if (dr.bottom > constrainTo.bottom) {
+                xy[1] += adjust = (constrainTo.bottom - dr.bottom);  // overflowed the bottom
+                dr.top += adjust;
+            }
+            if (dr.top < constrainTo.top) {
+                xy[1] += (constrainTo.top - dr.top);        // overflowed the top
+            }
+            return xy;
+        }
+    }
+});