    // @tag core
    /**
     * This mixin provides a common interface for objects that can be positioned, e.g.
     * {@link Ext.Component Components} and {@link Ext.dom.Element Elements}
     */
    Ext.define('Ext.util.Positionable', {

        _positionTopLeft: ['position', 'top', 'left'],

        _alignRe: /^([a-z]+)-([a-z]+)(\?)?$/,

        // Stub implementation called after positioning.
        // May be implemented in subclasses. AbstractComponent has an implementation.
        afterSetPosition: Ext.emptyFn,

        //<debug>
        // ***********************
        // Begin Abstract Methods
        // ***********************

        /**
         * Gets the x,y coordinates of an element specified by the anchor position on the
         * element.
         * @param {Ext.dom.Element} el The element
         * @param {String} [anchor='tl'] The specified anchor position.
         * See {@link #alignTo} for details on supported anchor positions.
         * @param {Boolean} [local] True to get the local (element top/left-relative) anchor
         * position instead of page coordinates
         * @param {Object} [size] An object containing the size to use for calculating anchor
         * position {width: (target width), height: (target height)} (defaults to the
         * element's current size)
         * @return {Number[]} [x, y] An array containing the element's x and y coordinates
         * @private
         */
        getAnchorToXY: function() {
            Ext.Error.raise("getAnchorToXY is not implemented in " + this.$className);
        },

        /**
         * Returns the size of the element's borders and padding.
         * @return {Object} an object with the following numeric properties
         * - beforeX
         * - afterX
         * - beforeY
         * - afterY
         * @private
         */
        getBorderPadding: function() {
            Ext.Error.raise("getBorderPadding is not implemented in " + this.$className);
        },

        /**
         * Returns the x coordinate of this element reletive to its `offsetParent`.
         * @return {Number} The local x coordinate
         */
        getLocalX: function() {
            Ext.Error.raise("getLocalX is not implemented in " + this.$className);
        },

        /**
         * Returns the x and y coordinates of this element relative to its `offsetParent`.
         * @return {Number[]} The local XY position of the element
         */
        getLocalXY: function() {
            Ext.Error.raise("getLocalXY is not implemented in " + this.$className);
        },

        /**
         * Returns the y coordinate of this element reletive to its `offsetParent`.
         * @return {Number} The local y coordinate
         */
        getLocalY: function() {
            Ext.Error.raise("getLocalY is not implemented in " + this.$className);
        },

        /**
         * Gets the current X position of the DOM element based on page coordinates.
         * @return {Number} The X position of the element
         */
        getX: function() {
            Ext.Error.raise("getX is not implemented in " + this.$className);
        },

        /**
         * Gets the current position of the DOM element based on page coordinates.
         * @return {Number[]} The XY position of the element
         */
        getXY: function() {
            Ext.Error.raise("getXY is not implemented in " + this.$className);
        },

        /**
         * Gets the current Y position of the DOM element based on page coordinates.
         * @return {Number} The Y position of the element
         */
        getY: function() {
            Ext.Error.raise("getY is not implemented in " + this.$className);
        },

        /**
         * Sets the local x coordinate of this element using CSS style. When used on an
         * absolute positioned element this method is symmetrical with {@link #getLocalX}, but
         * may not be symmetrical when used on a relatively positioned element.
         * @param {Number} x The x coordinate. A value of `null` sets the left style to 'auto'.
         * @return {Ext.util.Positionable} this
         */
        setLocalX: function() {
            Ext.Error.raise("setLocalX is not implemented in " + this.$className);
        },

        /**
         * Sets the local x and y coordinates of this element using CSS style. When used on an
         * absolute positioned element this method is symmetrical with {@link #getLocalXY}, but
         * may not be symmetrical when used on a relatively positioned element.
         * @param {Number/Array} x The x coordinate or an array containing [x, y]. A value of
         * `null` sets the left style to 'auto'
         * @param {Number} [y] The y coordinate, required if x is not an array. A value of
         * `null` sets the top style to 'auto'
         * @return {Ext.util.Positionable} this
         */
        setLocalXY: function() {
            Ext.Error.raise("setLocalXY is not implemented in " + this.$className);
        },

        /**
         * Sets the local y coordinate of this element using CSS style. When used on an
         * absolute positioned element this method is symmetrical with {@link #getLocalY}, but
         * may not be symmetrical when used on a relatively positioned element.
         * @param {Number} y The y coordinate. A value of `null` sets the top style to 'auto'.
         * @return {Ext.util.Positionable} this
         */
        setLocalY: function() {
            Ext.Error.raise("setLocalY is not implemented in " + this.$className);
        },

        /**
         * Sets the X position of the DOM element based on page coordinates.
         * @param {Number} The X position
         * @param {Boolean/Object} [animate] True for the default animation, or a standard
         * Element animation config object
         * @return {Ext.util.Positionable} this
         */
        setX: function() {
            Ext.Error.raise("setX is not implemented in " + this.$className);
        },

        /**
         * Sets the position of the DOM element in page coordinates.
         * @param {Number[]} pos Contains X & Y [x, y] values for new position (coordinates
         * are page-based)
         * @param {Boolean/Object} [animate] True for the default animation, or a standard
         * Element animation config object
         * @return {Ext.util.Positionable} this
         */
        setXY: function() {
            Ext.Error.raise("setXY is not implemented in " + this.$className);
        },

        /**
         * Sets the Y position of the DOM element based on page coordinates.
         * @param {Number} The Y position
         * @param {Boolean/Object} [animate] True for the default animation, or a standard
         * Element animation config object
         * @return {Ext.util.Positionable} this
         */
        setY: function() {
            Ext.Error.raise("setY is not implemented in " + this.$className);
        },

        // ***********************
        // End Abstract Methods
        // ***********************
        //</debug>

        // private ==>  used outside of core
        // TODO: currently only used by ToolTip. does this method belong here?
        adjustForConstraints: function(xy, parent) {
            var vector = this.getConstrainVector(parent, xy);
            if (vector) {
                xy[0] += vector[0];
                xy[1] += vector[1];
            }
            return xy;
        },

        /**
         * Aligns the element with another element relative to the specified anchor points. If
         * the other element is the document it aligns it to the viewport. The position
         * parameter is optional, and can be specified in any one of the following formats:
         *
         * - **Blank**: Defaults to aligning the element's top-left corner to the target's
         *   bottom-left corner ("tl-bl").
         * - **One anchor (deprecated)**: The passed anchor position is used as the target
         *   element's anchor point.  The element being aligned will position its top-left
         *   corner (tl) to that point. *This method has been deprecated in favor of the newer
         *   two anchor syntax below*.
         * - **Two anchors**: If two values from the table below are passed separated by a dash,
         *   the first value is used as the element's anchor point, and the second value is
         *   used as the target's anchor point.
         *
         * In addition to the anchor points, the position parameter also supports the "?"
         * character. If "?" is passed at the end of the position string, the element will
         * attempt to align as specified, but the position will be adjusted to constrain to
         * the viewport if necessary. Note that the element being aligned might be swapped to
         * align to a different position than that specified in order to enforce the viewport
         * constraints. Following are all of the supported anchor positions:
         *
         * <pre>
         * Value  Description
         * -----  -----------------------------
         * tl     The top left corner (default)
         * t      The center of the top edge
         * tr     The top right corner
         * l      The center of the left edge
         * c      In the center of the element
         * r      The center of the right edge
         * bl     The bottom left corner
         * b      The center of the bottom edge
         * br     The bottom right corner
         * </pre>
         *
         * Example Usage:
         *
         *     // align el to other-el using the default positioning
         *     // ("tl-bl", non-constrained)
         *     el.alignTo("other-el");
         *
         *     // align the top left corner of el with the top right corner of other-el
         *     // (constrained to viewport)
         *     el.alignTo("other-el", "tr?");
         *
         *     // align the bottom right corner of el with the center left edge of other-el
         *     el.alignTo("other-el", "br-l?");
         *
         *     // align the center of el with the bottom left corner of other-el and
         *     // adjust the x position by -6 pixels (and the y position by 0)
         *     el.alignTo("other-el", "c-bl", [-6, 0]);
         *
         * @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
         * HTMLElement, or id of the element to align to.
         * @param {String} [position="tl-bl?"] The position to align to
         * @param {Number[]} [offsets] Offset the positioning by [x, y]
         * @param {Boolean/Object} [animate] true for the default animation or a standard
         * Element animation config object
         * @return {Ext.util.Positionable} this
         */
        alignTo: function(element, position, offsets, animate) {
            var me = this,
                el = me.el;

            return me.setXY(me.getAlignToXY(element, position, offsets),
                    el.anim && !!animate ? el.anim(animate) : false);
        },

        /**
         * Anchors an element to another element and realigns it when the window is resized.
         * @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
         * HTMLElement, or id of the element to align to.
         * @param {String} [position="tl-bl?"] The position to align to
         * @param {Number[]} [offsets] Offset the positioning by [x, y]
         * @param {Boolean/Object} [animate] true for the default animation or a standard
         * Element animation config object
         * @param {Boolean/Number} [monitorScroll=50] True to monitor body scroll and
         * reposition. If this parameter is a number, it is used as the buffer delay in
         * milliseconds.
         * @param {Function} [callback] The function to call after the animation finishes
         * @return {Ext.util.Positionable} this
         */
        anchorTo: function(anchorToEl, alignment, offsets, animate, monitorScroll, callback) {
            var me = this,
                scroll = !Ext.isEmpty(monitorScroll),
                action = function() {
                    me.alignTo(anchorToEl, alignment, offsets, animate);
                    Ext.callback(callback, me);
                },
                anchor = me.getAnchor();

            // previous listener anchor, remove it
            me.removeAnchor();
            Ext.apply(anchor, {
                fn: action,
                scroll: scroll
            });

            Ext.EventManager.onWindowResize(action, null);

            if (scroll) {
                Ext.EventManager.on(window, 'scroll', action, null,
                        {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
            }
            action(); // align immediately
            return me;
        },

        /**
         * Calculates x,y coordinates specified by the anchor position on the element, adding
         * extraX and extraY values.
         * @param {String} [anchor='tl'] The specified anchor position.
         * See {@link #alignTo} for details on supported anchor positions.
         * @param {Number} [extraX] value to be added to the x coordinate
         * @param {Number} [extraY] value to be added to the y coordinate
         * @param {Object} [size] An object containing the size to use for calculating anchor
         * position {width: (target width), height: (target height)} (defaults to the
         * element's current size)
         * @return {Number[]} [x, y] An array containing the element's x and y coordinates
         * @private
         */
        calculateAnchorXY: function(anchor, extraX, extraY, mySize) {
            //Passing a different size is useful for pre-calculating anchors,
            //especially for anchored animations that change the el size.
            var me = this,
                el = me.el,
                doc = document,
                isViewport = el.dom == doc.body || el.dom == doc,
                round = Math.round,
                xy, myWidth, myHeight;

            anchor = (anchor || "tl").toLowerCase();
            mySize = mySize || {};

            myWidth = mySize.width || isViewport ? Ext.Element.getViewWidth() : me.getWidth();
            myHeight = mySize.height || isViewport ? Ext.Element.getViewHeight() : me.getHeight();

            // Calculate anchor position.
            // Test most common cases for picker alignment first.
            switch (anchor) {
                case 'tl' : xy = [0, 0];
                            break;
                case 'bl' : xy = [0, myHeight];
                            break;
                case 'tr' : xy = [myWidth, 0];
                            break;
                case 'c'  : xy = [round(myWidth * 0.5), round(myHeight * 0.5)];
                            break;
                case 't'  : xy = [round(myWidth * 0.5), 0];
                            break;
                case 'l'  : xy = [0, round(myHeight * 0.5)];
                            break;
                case 'r'  : xy = [myWidth, round(myHeight * 0.5)];
                            break;
                case 'b'  : xy = [round(myWidth * 0.5), myHeight];
                            break;
                case 'tc' : xy = [round(myWidth * 0.5), 0];
                            break;
                case 'bc' : xy = [round(myWidth * 0.5), myHeight];
                            break;
                case 'br' : xy = [myWidth, myHeight];
            }
            return [xy[0] + extraX, xy[1] + extraY];
        },

        /**
         * By default this method does nothing but return the position spec passed to it. In
         * rtl mode it is overridden to convert "l" to "r" and vice versa when required.
         * @private
         */
        convertPositionSpec: Ext.identityFn,

        /**
         * Gets the x,y coordinates to align this element with another element. See
         * {@link #alignTo} for more info on the supported position values.
         * @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
         * HTMLElement, or id of the element to align to.
         * @param {String} [position="tl-bl?"] The position to align to
         * @param {Number[]} [offsets] Offset the positioning by [x, y]
         * @return {Number[]} [x, y]
         */
        getAlignToXY: function(alignToEl, posSpec, offset) {
            var me = this,
                viewportWidth = Ext.Element.getViewWidth() - 10, // 10px of margin for ie
                viewportHeight = Ext.Element.getViewHeight() - 10, // 10px of margin for ie
                doc = document,
                docElement = doc.documentElement,
                docBody = doc.body,
                scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0),
                scrollY = (docElement.scrollTop  || docBody.scrollTop  || 0),
                alignMatch, myPosition, alignToElPosition, myWidth, myHeight,
                alignToElRegion, swapY, swapX, constrain, align1, align2,
                p1y, p1x, p2y, p2x, x, y;

            alignToEl = Ext.get(alignToEl.el || alignToEl);

            if (!alignToEl || !alignToEl.dom) {
                //<debug>
                Ext.Error.raise({
                    sourceClass: 'Ext.util.Positionable',
                    sourceMethod: 'getAlignToXY',
                    msg: 'Attempted to align an element that doesn\'t exist'
                });
                //</debug>
            }

            offset = offset || [0,0];
            posSpec = (!posSpec || posSpec == "?" ? "tl-bl?" :
                (!(/-/).test(posSpec) && posSpec !== "" ? "tl-" + posSpec : posSpec || "tl-bl")).toLowerCase();

            posSpec = me.convertPositionSpec(posSpec);

            alignMatch = posSpec.match(me._alignRe);

            //<debug>
            if (!alignMatch) {
                Ext.Error.raise({
                    sourceClass: 'Ext.util.Positionable',
                    sourceMethod: 'getAlignToXY',
                    el: alignToEl,
                    position: posSpec,
                    offset: offset,
                    msg: 'Attemmpted to align an element with an invalid position: "' + posSpec + '"'
                });
            }
            //</debug>

            align1 = alignMatch[1];
            align2 = alignMatch[2];
            constrain = !!alignMatch[3];

            //Subtract the aligned el's internal xy from the target's offset xy
            //plus custom offset to get this Element's new offset xy
            myPosition = me.getAnchorXY(align1, true);
            alignToElPosition = me.getAnchorToXY(alignToEl, align2, false);

            x = alignToElPosition[0] - myPosition[0] + offset[0];
            y = alignToElPosition[1] - myPosition[1] + offset[1];

            // If position spec ended with a "?", then constrain to viewport is necessary
            if (constrain) {
                myWidth = me.getWidth();
                myHeight = me.getHeight();
                alignToElRegion = alignToEl.getRegion();
                // If we are at a viewport boundary and the aligned el is anchored
                // on a target border that is perpendicular to the vp border,
                // allow the aligned el to slide on that border, otherwise swap
                // the aligned el to the opposite border of the target.
                p1y = align1.charAt(0);
                p1x = align1.charAt(align1.length - 1);
                p2y = align2.charAt(0);
                p2x = align2.charAt(align2.length - 1);
                swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
                swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));

                if (x + myWidth > viewportWidth + scrollX) {
                    x = swapX ? alignToElRegion.left - myWidth : viewportWidth + scrollX - myWidth;
                }
                if (x < scrollX) {
                    x = swapX ? alignToElRegion.right : scrollX;
                }
                if (y + myHeight > viewportHeight + scrollY) {
                    y = swapY ? alignToElRegion.top - myHeight : viewportHeight + scrollY - myHeight;
                }
                if (y < scrollY) {
                    y = swapY ? alignToElRegion.bottom : scrollY;
                }
            }
            return [x,y];
        },

        // private
        getAnchor: function(){
            var el = this.el,
                data = (el.$cache || el.getCache()).data,
                anchor;

            if (!el.dom) {
                return;
            }
            anchor = data._anchor;

            if(!anchor){
                anchor = data._anchor = {};
            }
            return anchor;
        },

        /**
         * Gets the x,y coordinates specified by the anchor position on the element.
         * @param {String} [anchor='tl'] The specified anchor position.
         * See {@link #alignTo} for details on supported anchor positions.
         * @param {Boolean} [local] True to get the local (element top/left-relative) anchor
         * position instead of page coordinates
         * @param {Object} [size] An object containing the size to use for calculating anchor
         * position {width: (target width), height: (target height)} (defaults to the
         * element's current size)
         * @return {Number[]} [x, y] An array containing the element's x and y coordinates
         */
        getAnchorXY: function(anchor, local, mySize) {
            var me = this,
                myPos = me.getXY(),
                el = me.el,
                doc = document,
                isViewport = el.dom == doc.body || el.dom == doc,
                scroll = el.getScroll(),
                extraX = isViewport ? scroll.left : local ? 0 : myPos[0],
                extraY = isViewport ? scroll.top : local ? 0 : myPos[1];

            return me.calculateAnchorXY(anchor, extraX, extraY, mySize);
        },

        /**
         * Return an object defining the area of this Element which can be passed to
         * {@link #setBox} to set another Element's size/location to match this element.
         *
         * @param {Boolean} [contentBox] If true a box for the content of the element is
         * returned.
         * @param {Boolean} [local] If true the element's left and top relative to its
         * `offsetParent` are returned instead of page x/y.
         * @return {Object} box An object in the format:
         *
         *     {
         *         x: <Element's X position>,
         *         y: <Element's Y position>,
         *         left: <Element's X position (an alias for x)>,
         *         top: <Element's Y position (an alias for y)>,
         *         width: <Element's width>,
         *         height: <Element's height>,
         *         bottom: <Element's lower bound>,
         *         right: <Element's rightmost bound>
         *     }
         *
         * The returned object may also be addressed as an Array where index 0 contains the X
         * position and index 1 contains the Y position. The result may also be used for
         * {@link #setXY}
         */
        getBox: function(contentBox, local) {
            var me = this,
                xy = local ? me.getLocalXY() : me.getXY(),
                x = xy[0],
                y = xy[1],
                w = me.getWidth(),
                h = me.getHeight(),
                borderPadding, beforeX, beforeY;

            if (contentBox) {
                borderPadding = me.getBorderPadding();
                beforeX = borderPadding.beforeX;
                beforeY = borderPadding.beforeY;

                x += beforeX;
                y += beforeY;
                w -= (beforeX + borderPadding.afterX);
                h -= (beforeY + borderPadding.afterY);
            }

            return {
                x: x,
                left: x,
                0: x,
                y: y,
                top: y,
                1: y,
                width: w,
                height: h,
                right: x + w,
                bottom: y + h
            };
        },

        /**
         * Calculates the new [x,y] position to move this Positionable into a constrain region.
         *
         * By default, this Positionable is constrained to be within the container it was added to, or the element it was
         * rendered to.
         *
         * Priority is given to constraining the top and left within the constraint.
         *
         * An alternative constraint may be passed.
         * @param {String/HTMLElement/Ext.Element/Ext.util.Region} [constrainTo] The Element or {@link Ext.util.Region Region}
         * into which this Component is to be constrained. Defaults to the element into which this Positionable
         * was rendered, or this Component's {@link Ext.Component#constrainTo.
         * @param {Number[]} [proposedPosition] A proposed `[X, Y]` position to test for validity
         * and to coerce into constraints instead of using this Positionable's current position.
         * @param {Boolean} [local] The proposedPosition is local *(relative to floatParent if a floating Component)*
         * @param {Number[]} [proposedSize] A proposed `[width, height]` size to use when calculating
         * constraints instead of using this Positionable's current size.
         * @return {Number[]} **If** the element *needs* to be translated, the new `[X, Y]` position within
         * constraints if possible, giving priority to keeping the top and left edge in the constrain region.
         * Otherwise, `false`.
         */
        calculateConstrainedPosition: function(constrainTo, proposedPosition, local, proposedSize) {
            var me = this,
                vector,
                fp = me.floatParent,
                parentNode = fp ? fp.getTargetEl() : null,
                parentOffset,
                borderPadding,
                proposedConstrainPosition,
                xy = false;

            if (local && fp) {
                parentOffset = parentNode.getXY();
                borderPadding = parentNode.getBorderPadding();
                parentOffset[0] += borderPadding.beforeX;
                parentOffset[1] += borderPadding.beforeY;
                if (proposedPosition) {
                    proposedConstrainPosition = [proposedPosition[0] + parentOffset[0], proposedPosition[1] + parentOffset[1]];
                }
            } else {
                proposedConstrainPosition = proposedPosition;
            }
            // Calculate the constrain vector to coerce our position to within our
            // constrainTo setting. getConstrainVector will provide a default constraint
            // region if there is no explicit constrainTo, *and* there is no floatParent owner Component.
            constrainTo = constrainTo || me.constrainTo || parentNode || me.container || me.el.parent();
            vector = (me.constrainHeader ? me.header : me).getConstrainVector(constrainTo, proposedConstrainPosition, proposedSize);

            // false is returned if no movement is needed
            if (vector) {
                xy = proposedPosition || me.getPosition(local);
                xy[0] += vector[0];
                xy[1] += vector[1];
            }
            return xy;
        },

        /**
         * Returns the `[X, Y]` vector by which this Positionable's element must be translated to make a best
         * attempt to constrain within the passed constraint. Returns `false` if the element
         * does not need to be moved.
         *
         * Priority is given to constraining the top and left within the constraint.
         *
         * The constraint may either be an existing element into which the element is to be
         * constrained, or a {@link Ext.util.Region Region} into which this element is to be
         * constrained.
         *
         * By default, any extra shadow around the element is **not** included in the constrain calculations - the edges
         * of the element are used as the element bounds. To constrain the shadow within the constrain region, set the
         * `constrainShadow` property on this element to `true`.
         *
         * @param {Ext.util.Positionable/HTMLElement/String/Ext.util.Region} [constrainTo] The
         * Positionable, HTMLElement, element id, or Region into which the element is to be
         * constrained.
         * @param {Number[]} [proposedPosition] A proposed `[X, Y]` position to test for validity
         * and to produce a vector for instead of using the element's current position
         * @param {Number[]} [proposedSize] A proposed `[width, height]` size to constrain
         * instead of using the element's current size
         * @return {Number[]/Boolean} **If** the element *needs* to be translated, an `[X, Y]`
         * vector by which this element must be translated. Otherwise, `false`.
         */
        getConstrainVector: function(constrainTo, proposedPosition, proposedSize) {
            var thisRegion = this.getRegion(),
                vector = [0, 0],
                shadowSize = (this.shadow && this.constrainShadow && !this.shadowDisabled) ? this.shadow.getShadowSize() : undefined,
                overflowed = false,
                constraintInsets = this.constraintInsets;

            if (!(constrainTo instanceof Ext.util.Region)) {
                constrainTo = Ext.get(constrainTo.el || constrainTo).getViewRegion();
            }

            // Apply constraintInsets
            if (constraintInsets) {
                constraintInsets = Ext.isObject(constraintInsets) ? constraintInsets : Ext.Element.parseBox(constraintInsets);
                constrainTo.adjust(constraintInsets.top, constraintInsets.right, constraintInsets.bottom, constraintInsets.length);
            }

            // Shift this region to occupy the proposed position
            if (proposedPosition) {
                thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
            }
            // Set the size of this region to the proposed size
            if (proposedSize) {
                thisRegion.right = thisRegion.left + proposedSize[0];
                thisRegion.bottom = thisRegion.top + proposedSize[1];
            }

            // Reduce the constrain region to allow for shadow
            if (shadowSize) {
                constrainTo.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);
            }

            // Constrain the X coordinate by however much this Element overflows
            if (thisRegion.right > constrainTo.right) {
                overflowed = true;
                vector[0] = (constrainTo.right - thisRegion.right);    // overflowed the right
            }
            if (thisRegion.left + vector[0] < constrainTo.left) {
                overflowed = true;
                vector[0] = (constrainTo.left - thisRegion.left);      // overflowed the left
            }

            // Constrain the Y coordinate by however much this Element overflows
            if (thisRegion.bottom > constrainTo.bottom) {
                overflowed = true;
                vector[1] = (constrainTo.bottom - thisRegion.bottom);  // overflowed the bottom
            }
            if (thisRegion.top + vector[1] < constrainTo.top) {
                overflowed = true;
                vector[1] = (constrainTo.top - thisRegion.top);        // overflowed the top
            }
            return overflowed ? vector : false;
        },

        /**
          * Returns the offsets of this element from the passed element. The element must both
          * be part of the DOM tree and not have display:none to have page coordinates.
          * @param {Ext.util.Positionable/HTMLElement/String} offsetsTo The Positionable,
          * HTMLElement, or element id to get get the offsets from.
          * @return {Number[]} The XY page offsets (e.g. `[100, -200]`)
          */
        getOffsetsTo: function(offsetsTo) {
            var o = this.getXY(),
                    e = Ext.fly(offsetsTo.el || offsetsTo, '_internal').getXY();
            return [o[0] - e[0],o[1] - e[1]];
        },

        /**
         * Returns a region object that defines the area of this element.
         * @return {Ext.util.Region} A Region containing "top, left, bottom, right" properties.
         */
        getRegion: function() {
            var box = this.getBox();
            return new Ext.util.Region(box.top, box.right, box.bottom, box.left);
        },

        /**
         * Returns the **content** region of this element. That is the region within the borders
         * and padding.
         * @return {Ext.util.Region} A Region containing "top, left, bottom, right" member data.
         */
        getViewRegion: function() {
            var me = this,
                el = me.el,
                isBody = el.dom.nodeName === 'BODY',
                borderPadding, scroll, pos, top, left, width, height;

            // For the body we want to do some special logic
            if (isBody) {
                scroll = el.getScroll();
                left = scroll.left;
                top = scroll.top;
                width = Ext.dom.AbstractElement.getViewportWidth();
                height = Ext.dom.AbstractElement.getViewportHeight();
            }
            else {
                borderPadding = me.getBorderPadding();
                pos = me.getXY();
                left = pos[0] + borderPadding.beforeX;
                top = pos[1] + borderPadding.beforeY;
                width = me.getWidth(true);
                height = me.getHeight(true);
            }

            return new Ext.util.Region(top, left + width, top + height, left);
        },

        /**
         * Move the element relative to its current position.
         * @param {String} direction Possible values are:
         *
         * - `"l"` (or `"left"`)
         * - `"r"` (or `"right"`)
         * - `"t"` (or `"top"`, or `"up"`)
         * - `"b"` (or `"bottom"`, or `"down"`)
         *
         * @param {Number} distance How far to move the element in pixels
         * @param {Boolean/Object} [animate] true for the default animation or a standard
         * Element animation config object
         */
        move: function(direction, distance, animate) {
            var me = this,
                xy = me.getXY(),
                x = xy[0],
                y = xy[1],
                left = [x - distance, y],
                right = [x + distance, y],
                top = [x, y - distance],
                bottom = [x, y + distance],
                hash = {
                    l: left,
                    left: left,
                    r: right,
                    right: right,
                    t: top,
                    top: top,
                    up: top,
                    b: bottom,
                    bottom: bottom,
                    down: bottom
                };

            direction = direction.toLowerCase();
            me.setXY([hash[direction][0], hash[direction][1]], animate);
        },

        /**
         * Remove any anchor to this element. See {@link #anchorTo}.
         * @return {Ext.util.Positionable} this
         */
        removeAnchor: function() {
            var anchor = this.getAnchor();

            if (anchor && anchor.fn) {
                Ext.EventManager.removeResizeListener(anchor.fn);
                if (anchor.scroll) {
                    Ext.EventManager.un(window, 'scroll', anchor.fn);
                }
                delete anchor.fn;
            }
            return this;
        },

        /**
         * Sets the element's box. If animate is true then x, y, width, and height will be
         * animated concurrently.
         * @param {Object} box The box to fill {x, y, width, height}
         * @param {Boolean/Object} [animate] true for the default animation or a standard
         * Element animation config object
         * @return {Ext.util.Positionable} this
         */
        setBox: function(box, animate) {
            var me = this,
                el = me.el,
                x = box.x,
                y = box.y,
                xy = [x, y],
                w = box.width,
                h = box.height,
                doConstrain = (me.constrain || me.constrainHeader),
                constrainedPos = doConstrain && me.calculateConstrainedPosition(null, [x, y], false, [w, h]);

            // Position to the contrained
            if (constrainedPos) {
                x = constrainedPos[0];
                y = constrainedPos[1];
            }
            if (!animate || !el.anim) {
                me.setSize(w, h);
                me.setXY([x, y]);
                me.afterSetPosition(x, y);
            } else {
                me.animate(Ext.applyIf({
                    to: {
                        x: x,
                        y: y,
                        width: el.adjustWidth(w),
                        height: el.adjustHeight(h)
                    },
                    listeners: {
                        afteranimate: Ext.Function.bind(me.afterSetPosition, me, [x, y])
                    }
                }, animate));
            }
            return me;
        },

        /**
         * Sets the element's position and size to the specified region. If animation is true
         * then width, height, x and y will be animated concurrently.
         *
         * @param {Ext.util.Region} region The region to fill
         * @param {Boolean/Object} [animate] true for the default animation or a standard
         * Element animation config object
         * @return {Ext.util.Positionable} this
         */
        setRegion: function(region, animate) {
            return this.setBox({
                x: region.left,
                y: region.top,
                width: region.right - region.left,
                height: region.bottom - region.top
            }, animate);
        },

        /**
         * Translates the passed page coordinates into left/top css values for the element
         * @param {Number/Array} x The page x or an array containing [x, y]
         * @param {Number} [y] The page y, required if x is not an array
         * @return {Object} An object with left and top properties. e.g.
         * {left: (value), top: (value)}
         */
        translatePoints: function(x, y) {
            var pos = this.translateXY(x, y);

            return {
                left: pos.x,
                top: pos.y
            };
        },

        /**
         * Translates the passed page coordinates into x and y css values for the element
         * @param {Number/Array} x The page x or an array containing [x, y]
         * @param {Number} [y] The page y, required if x is not an array
         * @return {Object} An object with x and y properties. e.g.
         * {x: (value), y: (value)}
         * @private
         */
        translateXY: function(x, y) {
            var me = this,
                el = me.el,
                styles = el.getStyle(me._positionTopLeft),
                relative = styles.position == 'relative',
                left = parseFloat(styles.left),
                top = parseFloat(styles.top),
                xy = me.getXY();

            if (Ext.isArray(x)) {
                 y = x[1];
                 x = x[0];
            }
            if (isNaN(left)) {
                left = relative ? 0 : el.dom.offsetLeft;
            }
            if (isNaN(top)) {
                top = relative ? 0 : el.dom.offsetTop;
            }
            left = (typeof x == 'number') ? x - xy[0] + left : undefined;
            top = (typeof y == 'number') ? y - xy[1] + top : undefined;
            return {
                x: left,
                y: top
            };
        }
    });