add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / tip / ToolTip.js

/**\r
 * ToolTip is a {@link Ext.tip.Tip} implementation that handles the common case of displaying a\r
 * tooltip when hovering over a certain element or elements on the page. It allows fine-grained\r
 * control over the tooltip's alignment relative to the target element or mouse, and the timing\r
 * of when it is automatically shown and hidden.\r
 *\r
 * This implementation does **not** have a built-in method of automatically populating the tooltip's\r
 * text based on the target element; you must either configure a fixed {@link #html} value for each\r
 * ToolTip instance, or implement custom logic (e.g. in a {@link #beforeshow} event listener) to\r
 * generate the appropriate tooltip content on the fly. See {@link Ext.tip.QuickTip} for a more\r
 * convenient way of automatically populating and configuring a tooltip based on specific DOM\r
 * attributes of each target element.\r
 *\r
 * # Basic Example\r
 *\r
 *     @example\r
 *     Ext.getBody().appendChild({\r
 *         id: 'clearButton',\r
 *         html: 'Clear Button',\r
 *         style: 'display:inline-block;background:#A2C841;padding:7px;cursor:pointer;'\r
 *     });\r
 *\r
 *     var tip = Ext.create('Ext.tip.ToolTip', {\r
 *         target: 'clearButton',\r
 *         html: 'Press this button to clear the form'\r
 *     });\r
 *\r
 * # Delegation\r
 *\r
 * In addition to attaching a ToolTip to a single element, you can also use delegation to attach\r
 * one ToolTip to many elements under a common parent. This is more efficient than creating many\r
 * ToolTip instances. To do this, point the {@link #target} config to a common ancestor of all the\r
 * elements, and then set the {@link #delegate} config to a CSS selector that will select all the\r
 * appropriate sub-elements.\r
 *\r
 * When using delegation, it is likely that you will want to programmatically change the content\r
 * of the ToolTip based on each delegate element; you can do this by implementing a custom\r
 * listener for the {@link #beforeshow} event. Example:\r
 *\r
 *     @example\r
 *     var store = Ext.create('Ext.data.ArrayStore', {\r
 *         fields: ['company', 'price', 'change'],\r
 *         data: [\r
 *             ['3m Co',                               71.72, 0.02],\r
 *             ['Alcoa Inc',                           29.01, 0.42],\r
 *             ['Altria Group Inc',                    83.81, 0.28],\r
 *             ['American Express Company',            52.55, 0.01],\r
 *             ['American International Group, Inc.',  64.13, 0.31],\r
 *             ['AT&T Inc.',                           31.61, -0.48]\r
 *         ]\r
 *     });\r
 *\r
 *     var grid = Ext.create('Ext.grid.Panel', {\r
 *         title: 'Array Grid',\r
 *         store: store,\r
 *         columns: [\r
 *             {text: 'Company', flex: 1, dataIndex: 'company'},\r
 *             {text: 'Price', width: 75, dataIndex: 'price'},\r
 *             {text: 'Change', width: 75, dataIndex: 'change'}\r
 *         ],\r
 *         height: 200,\r
 *         width: 400,\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 *\r
 *     var view = grid.getView();\r
 *     var tip = Ext.create('Ext.tip.ToolTip', {\r
 *         // The overall target element.\r
 *         target: view.el,\r
 *         // Each grid row causes its own separate show and hide.\r
 *         delegate: view.itemSelector,\r
 *         // Moving within the row should not hide the tip.\r
 *         trackMouse: true,\r
 *         // Render immediately so that tip.body can be referenced prior to the first show.\r
 *         renderTo: Ext.getBody(),\r
 *         listeners: {\r
 *             // Change content dynamically depending on which element triggered the show.\r
 *             beforeshow: function updateTipBody(tip) {\r
 *                 tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');\r
 *             }\r
 *         }\r
 *     });\r
 *\r
 * # Alignment\r
 *\r
 * The following configuration properties allow control over how the ToolTip is aligned relative to\r
 * the target element and/or mouse pointer:\r
 *\r
 * - {@link #anchor}\r
 * - {@link #anchorToTarget}\r
 * - {@link #anchorOffset}\r
 * - {@link #trackMouse}\r
 * - {@link #mouseOffset}\r
 *\r
 * # Showing/Hiding\r
 *\r
 * The following configuration properties allow control over how and when the ToolTip is automatically\r
 * shown and hidden:\r
 *\r
 * - {@link #autoHide}\r
 * - {@link #showDelay}\r
 * - {@link #hideDelay}\r
 * - {@link #dismissDelay}\r
 */\r
Ext.define('Ext.tip.ToolTip', {\r
    extend: 'Ext.tip.Tip',\r
    alias: 'widget.tooltip',\r
    alternateClassName: 'Ext.ToolTip',\r
\r
    /**\r
     * @property {HTMLElement} triggerElement\r
     * When a ToolTip is configured with the `{@link #delegate}`\r
     * option to cause selected child elements of the `{@link #target}`\r
     * Element to each trigger a separate show event, this property is set to\r
     * the DOM element which triggered the show.\r
     */\r
    /**\r
     * @cfg {HTMLElement/Ext.dom.Element/String} target\r
     * The target element or string id to monitor for mouseover events to trigger\r
     * showing this ToolTip.\r
     */\r
    /**\r
     * @cfg {Boolean} [autoHide=true]\r
     * True to automatically hide the tooltip after the\r
     * mouse exits the target element or after the `{@link #dismissDelay}`\r
     * has expired if set.  If `{@link #closable} = true`\r
     * a close tool button will be rendered into the tooltip header.\r
     */\r
    autoHide: true,\r
\r
    /**\r
     * @cfg {Number} showDelay\r
     * Delay in milliseconds before the tooltip displays after the mouse enters the target element.\r
     */\r
    showDelay: 500,\r
    /**\r
     * @cfg {Number} hideDelay\r
     * Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides.\r
     * Set to 0 for the tooltip to hide immediately.\r
     */\r
    hideDelay: 200,\r
    /**\r
     * @cfg {Number} dismissDelay\r
     * Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set\r
     * dismissDelay = 0.\r
     */\r
    dismissDelay: 5000,\r
    /**\r
     * @cfg {Number[]} [mouseOffset=[15,18]]\r
     * An XY offset from the mouse position where the tooltip should be shown.\r
     */\r
    /**\r
     * @cfg {Boolean} trackMouse\r
     * True to have the tooltip follow the mouse as it moves over the target element.\r
     */\r
    trackMouse: false,\r
    /**\r
     * @cfg {String} anchor\r
     * If specified, indicates that the tip should be anchored to a\r
     * particular side of the target element or mouse pointer ("top", "right", "bottom",\r
     * or "left"), with an arrow pointing back at the target or mouse pointer. If\r
     * {@link #constrainPosition} is enabled, this will be used as a preferred value\r
     * only and may be flipped as needed.\r
     */\r
    /**\r
     * @cfg {Boolean} anchorToTarget\r
     * True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates.\r
     * When `anchorToTarget` is true, use `{@link #defaultAlign}` to control tooltip alignment to the\r
     * target element.  When `anchorToTarget` is false, use `{@link #anchor}` instead to control alignment.\r
     */\r
    anchorToTarget: true,\r
    /**\r
     * @cfg {Number} anchorOffset\r
     * A numeric pixel value used to offset the default position of the anchor arrow.  When the anchor\r
     * position is on the top or bottom of the tooltip, `anchorOffset` will be used as a horizontal offset.\r
     * Likewise, when the anchor position is on the left or right side, `anchorOffset` will be used as\r
     * a vertical offset.\r
     */\r
    anchorOffset: 0,\r
\r
    /**\r
     * @cfg {String} delegate\r
     *\r
     * A {@link Ext.DomQuery DomQuery} simple selector which allows selection of individual elements within the\r
     * `{@link #target}` element to trigger showing and hiding the ToolTip as the mouse moves within the\r
     * target. See {@link Ext.dom.Query} for information about simple selectors.\r
     *\r
     * When specified, the child element of the target which caused a show event is placed into the\r
     * `{@link #triggerElement}` property before the ToolTip is shown.\r
     *\r
     * This may be useful when a Component has regular, repeating elements in it, each of which need a\r
     * ToolTip which contains information specific to that element.\r
     *\r
     * See the delegate example in class documentation of {@link Ext.tip.ToolTip}.\r
     */\r
\r
    /**\r
     * @private\r
     */\r
    targetCounter: 0,\r
\r
    quickShowInterval: 250,\r
\r
    /**\r
     * @cfg {String} [hideAction="hide"]\r
     * The method to use to hide the tooltip. Another useful method for this is `fadeOut`.\r
     */\r
    hideAction: 'hide',\r
\r
    /**\r
     * @cfg {Number} [fadeOutDuration=1000]\r
     * The number of milliseconds for the `fadeOut` animation. Only valid if `hideAction`\r
     * is set to `fadeOut`.\r
     */\r
    fadeOutDuration: 1000,\r
\r
    ariaRole: 'tooltip',\r
\r
    initComponent: function() {\r
        var me = this;\r
        me.callParent(arguments);\r
        me.lastActive = new Date();\r
        me.setTarget(me.target);\r
        me.origAnchor = me.anchor;\r
    },\r
\r
    onRender: function(ct, position) {\r
        var me = this;\r
        me.callParent(arguments);\r
        me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();\r
        //<debug>\r
        if (me.sticky) {\r
            // tell the spec runner to ignore this element when checking if the dom is clean\r
            me.el.dom.setAttribute('data-sticky', true);\r
        }\r
        //</debug>\r
        me.anchorEl = me.el.createChild({\r
            role: 'presentation',\r
            cls: Ext.baseCSSPrefix + 'tip-anchor ' + me.anchorCls\r
        });\r
    },\r
\r
    /**\r
     * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.\r
     * @param {String/HTMLElement/Ext.dom.Element} target The Element, HTMLElement, or\r
     * ID of an element to bind to\r
     */\r
    setTarget: function(target) {\r
        var me = this,\r
            t = Ext.get(target),\r
            tg;\r
\r
        if (me.target) {\r
            tg = Ext.get(me.target);\r
            if (Ext.supports.Touch) {\r
                me.mun(tg, 'tap', me.onTargetOver, me);\r
            } else {\r
                me.mun(tg, {\r
                    mouseover: me.onTargetOver,\r
                    mouseout: me.onTargetOut,\r
                    mousemove: me.onMouseMove,\r
                    scope: me\r
                });\r
            }\r
        }\r
\r
        me.target = t;\r
        if (t) {\r
            if (Ext.supports.Touch) {\r
                me.mon(t, {\r
                    tap: me.onTargetOver,\r
                    scope: me\r
                });\r
            } else {\r
                me.mon(t, {\r
                    mouseover: me.onTargetOver,\r
                    mouseout: me.onTargetOut,\r
                    mousemove: me.onMouseMove,\r
                    scope: me\r
                });\r
            }\r
        }\r
        if (me.anchor) {\r
            me.anchorTarget = me.target;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onMouseMove: function(e) {\r
        var me = this,\r
            t,\r
            xy;\r
\r
        // If the event target is no longer in this tip's target (possibly due to rapidly churning content in target), ignore it.\r
        if (!me.target || me.target.contains(e.target)) {\r
            t = me.delegate ? e.getTarget(me.delegate) : (me.triggerElement = true);\r
            if (t) {\r
                me.targetXY = e.getXY();\r
                if (t === me.triggerElement) {\r
                    if (!me.hidden && me.trackMouse) {\r
                        xy = me.getTargetXY();\r
                        if (me.constrainPosition) {\r
                            xy = me.el.adjustForConstraints(xy, me.el.parent());\r
                        }\r
                        me.setPagePosition(xy);\r
                    }\r
                } else {\r
                    me.hide();\r
                    me.lastActive = new Date(0);\r
                    me.onTargetOver(e);\r
                }\r
            } else if ((!me.closable && me.isVisible()) && me.autoHide !== false) {\r
                me.delayHide();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    getTargetXY: function() {\r
        var me = this,\r
            mouseOffset,\r
            offsets, xy, dw, dh, de, bd, scrollX, scrollY, axy, sz, constrainPosition;\r
        if (me.delegate) {\r
            me.anchorTarget = me.triggerElement;\r
        }\r
        if (me.anchor) {\r
            me.targetCounter++;\r
            offsets = me.getOffsets();\r
            xy = (me.anchorToTarget && !me.trackMouse) ? me.getAlignToXY(me.anchorTarget, me.getAnchorAlign()) : me.targetXY;\r
            dw = Ext.Element.getViewportWidth() - 5;\r
            dh = Ext.Element.getViewportHeight() - 5;\r
            de = document.documentElement;\r
            bd = document.body;\r
            scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5;\r
            scrollY = (de.scrollTop || bd.scrollTop || 0) + 5;\r
            axy = [xy[0] + offsets[0], xy[1] + offsets[1]];\r
            sz = me.getSize();\r
            constrainPosition = me.constrainPosition;\r
\r
            me.anchorEl.removeCls(me.anchorCls);\r
\r
            if (me.targetCounter < 2 && constrainPosition) {\r
                if (axy[0] < scrollX) {\r
                    if (me.anchorToTarget) {\r
                        me.defaultAlign = 'l-r';\r
                        if (me.mouseOffset) {\r
                            me.mouseOffset[0] *= -1;\r
                        }\r
                    }\r
                    me.anchor = 'left';\r
                    return me.getTargetXY();\r
                }\r
                if (axy[0] + sz.width > dw) {\r
                    if (me.anchorToTarget) {\r
                        me.defaultAlign = 'r-l';\r
                        if (me.mouseOffset) {\r
                            me.mouseOffset[0] *= -1;\r
                        }\r
                    }\r
                    me.anchor = 'right';\r
                    return me.getTargetXY();\r
                }\r
                if (axy[1] < scrollY) {\r
                    if (me.anchorToTarget) {\r
                        me.defaultAlign = 't-b';\r
                        if (me.mouseOffset) {\r
                            me.mouseOffset[1] *= -1;\r
                        }\r
                    }\r
                    me.anchor = 'top';\r
                    return me.getTargetXY();\r
                }\r
                if (axy[1] + sz.height > dh) {\r
                    if (me.anchorToTarget) {\r
                        me.defaultAlign = 'b-t';\r
                        if (me.mouseOffset) {\r
                            me.mouseOffset[1] *= -1;\r
                        }\r
                    }\r
                    me.anchor = 'bottom';\r
                    return me.getTargetXY();\r
                }\r
            }\r
\r
            me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();\r
            me.anchorEl.addCls(me.anchorCls);\r
            me.targetCounter = 0;\r
            return axy;\r
        } else {\r
            mouseOffset = me.getMouseOffset();\r
            return (me.targetXY) ? [me.targetXY[0] + mouseOffset[0], me.targetXY[1] + mouseOffset[1]] : mouseOffset;\r
        }\r
    },\r
\r
    /**\r
     * Overrides Positionable's calculateConstrainedPosition to return a value that is\r
     * valid for ToolTip\r
     * @private\r
     */\r
    calculateConstrainedPosition: function(constrainTo) {\r
        var me = this,\r
            visible,\r
            result,\r
            floatParentBox;\r
\r
        // If this is a floating child, account for the fact that positioning will be relative to it\r
        if (!constrainTo && me.isContainedFloater()) {\r
            visible = me.isVisible();\r
            if (!visible) {\r
                me.el.show();\r
            }\r
            result = me.getTargetXY();\r
            if (!visible) {\r
                me.el.hide();\r
            }\r
            floatParentBox = me.floatParent.getTargetEl().getViewRegion();\r
            result[0] -= floatParentBox.left;\r
            result[1] -= floatParentBox.top;\r
        } else {\r
            result = me.callOverridden(arguments);\r
        }\r
        return result;\r
    },\r
\r
    getMouseOffset: function() {\r
        var me = this,\r
        offset = me.anchor ? [0, 0] : [15, 18];\r
        if (me.mouseOffset) {\r
            offset[0] += me.mouseOffset[0];\r
            offset[1] += me.mouseOffset[1];\r
        }\r
        return offset;\r
    },\r
\r
    fadeOut: function () {\r
        var me = this;\r
\r
        me.el.fadeOut({\r
            duration: me.fadeOutDuration,\r
            callback: function () {\r
                me.hide();\r
                me.el.setOpacity('');\r
            }\r
        });\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    getAnchorPosition: function() {\r
        var me = this,\r
            m;\r
        if (me.anchor) {\r
            me.tipAnchor = me.anchor.charAt(0);\r
        } else {\r
            m = me.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
            //<debug>\r
            if (!m) {\r
                Ext.raise('The AnchorTip.defaultAlign value "' + me.defaultAlign + '" is invalid.');\r
            }\r
            //</debug>\r
            me.tipAnchor = m[1].charAt(0);\r
        }\r
\r
        switch (me.tipAnchor) {\r
        case 't':\r
            return 'top';\r
        case 'b':\r
            return 'bottom';\r
        case 'r':\r
            return 'right';\r
        }\r
        return 'left';\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    getAnchorAlign: function() {\r
        switch (this.anchor) {\r
        case 'top':\r
            return 'tl-bl';\r
        case 'left':\r
            return 'tl-tr';\r
        case 'right':\r
            return 'tr-tl';\r
        default:\r
            return 'bl-tl';\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    getOffsets: function() {\r
        var me = this,\r
            mouseOffset,\r
            offsets,\r
            ap = me.getAnchorPosition().charAt(0);\r
        if (me.anchorToTarget && !me.trackMouse) {\r
            switch (ap) {\r
            case 't':\r
                offsets = [0, 9];\r
                break;\r
            case 'b':\r
                offsets = [0, -13];\r
                break;\r
            case 'r':\r
                offsets = [-13, 0];\r
                break;\r
            default:\r
                offsets = [9, 0];\r
                break;\r
            }\r
        } else {\r
            switch (ap) {\r
            case 't':\r
                offsets = [-15 - me.anchorOffset, 30];\r
                break;\r
            case 'b':\r
                offsets = [-19 - me.anchorOffset, -13 - me.el.dom.offsetHeight];\r
                break;\r
            case 'r':\r
                offsets = [-15 - me.el.dom.offsetWidth, -13 - me.anchorOffset];\r
                break;\r
            default:\r
                offsets = [25, -13 - me.anchorOffset];\r
                break;\r
            }\r
        }\r
        mouseOffset = me.getMouseOffset();\r
        offsets[0] += mouseOffset[0];\r
        offsets[1] += mouseOffset[1];\r
\r
        return offsets;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTargetOver: function(e) {\r
        var me = this,\r
            delegate = me.delegate,\r
            t;\r
\r
        if (me.disabled || e.within(me.target.dom, true)) {\r
            return;\r
        }\r
        t = delegate ? e.getTarget(delegate) : true;\r
        if (t) {\r
            me.triggerElement = t;\r
            me.triggerEvent = e;\r
            me.clearTimer('hide');\r
            me.targetXY = e.getXY();\r
            me.delayShow();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    delayShow: function (trackMouse) {\r
        // When delaying, cache the XY coords of the mouse when this method was invoked, NOT when the deferred\r
        // show is called because the mouse could then be in a completely different location. Only cache the\r
        // coords when trackMouse is false.\r
        //\r
        // Note that the delayShow call could be coming from a caller which would internally be setting trackMouse\r
        // (e.g., Ext.chart.Tip:showTip()). Because of this, the caller will pass along the original value for\r
        // trackMouse (i.e., the value passed to the component constructor) to the delayShow method.\r
        // See EXTJSIV-11292.\r
        var me = this,\r
            xy = me.el && (trackMouse === false || !me.trackMouse) && me.getTargetXY();\r
\r
        if (me.hidden && !me.showTimer) {\r
            if (Ext.Date.getElapsed(me.lastActive) < me.quickShowInterval) {\r
                me.show();\r
            } else {\r
                me.showTimer = Ext.defer(me.showFromDelay, me.showDelay, me, [xy]);\r
            }\r
        }\r
        else if (!me.hidden && me.autoHide !== false) {\r
            me.show(xy);\r
        }\r
    },\r
\r
    showFromDelay: function (xy) {\r
        var me = this;\r
        // Need to check this here since onDisable only gets called after render, which\r
        // the show call below may trigger\r
        if (me.disabled) {\r
            return;\r
        }\r
\r
        me.fromDelayShow = true;\r
        me.show(xy);\r
        delete me.fromDelayShow;\r
    },\r
\r
    onShowVeto: function(){\r
        this.callParent();\r
        delete this.triggerElement;\r
        this.clearTimer('show');\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTargetOut: function(e) {\r
        var me = this,\r
            triggerEl = me.triggerElement,\r
            // If we don't have a delegate, then the target is set\r
            // to true, so set it to the main target.\r
            target = triggerEl === true ? me.target : triggerEl;\r
\r
        // If disabled, moving within the current target, ignore the mouseout\r
        // e.within is the only correct way to determine this.\r
        if (me.disabled || !triggerEl || e.within(target, true)) {\r
            return;\r
        }\r
        if (me.showTimer) {\r
            me.clearTimer('show');\r
            me.triggerElement = null;\r
        }\r
        if (me.autoHide !== false) {\r
            me.delayHide();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    delayHide: function() {\r
        var me = this;\r
\r
        if (!me.hidden && !me.hideTimer) {\r
            me.hideTimer = Ext.defer(me[me.hideAction], me.hideDelay, me);\r
        }\r
    },\r
\r
    /**\r
     * Hides this tooltip if visible.\r
     */\r
    hide: function() {\r
        var me = this;\r
        me.clearTimer('dismiss');\r
        me.lastActive = new Date();\r
        if (me.anchorEl) {\r
            me.anchorEl.hide();\r
        }\r
        me.callParent(arguments);\r
        delete me.triggerElement;\r
    },\r
\r
    /**\r
     * Shows this tooltip at the current event target XY position.\r
     */\r
    show: function (xy) {\r
        var me = this;\r
\r
        // Show this Component first, so that sizing can be calculated\r
        // pre-show it off screen so that the el will have dimensions\r
        this.callParent();\r
        if (this.hidden === false) {\r
            if (me.anchor) {\r
                me.anchor = me.origAnchor;\r
            }\r
\r
            if (!me.calledFromShowAt) {\r
                // If the caller was this.showFromDelay(), the XY coords may have been cached.\r
                me.showAt(xy || me.getTargetXY());\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     */\r
    showAt: function(xy) {\r
        var me = this;\r
        me.lastActive = new Date();\r
        me.clearTimers();\r
        me.calledFromShowAt = true;\r
\r
        // Only call if this is hidden. May have been called from show above.\r
        if (!me.isVisible()) {\r
            this.callParent(arguments);\r
        }\r
\r
        // Show may have been vetoed.\r
        if (me.isVisible()) {\r
            me.setPagePosition(xy[0], xy[1]);\r
            if (me.constrainPosition || me.constrain) {\r
                me.doConstrain();\r
            }\r
            me.toFront(true);\r
            me.el.syncUnderlays();\r
            if (me.dismissDelay && me.autoHide !== false) {\r
                me.dismissTimer = Ext.defer(me.hide, me.dismissDelay, me);\r
            }\r
        }\r
        delete me.calledFromShowAt;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    syncAnchor: function() {\r
        var me = this,\r
            anchorPos,\r
            targetPos,\r
            offset;\r
        switch (me.tipAnchor.charAt(0)) {\r
        case 't':\r
            anchorPos = 'b';\r
            targetPos = 'tl';\r
            offset = [20 + me.anchorOffset, 1];\r
            break;\r
        case 'r':\r
            anchorPos = 'l';\r
            targetPos = 'tr';\r
            offset = [ - 1, 12 + me.anchorOffset];\r
            break;\r
        case 'b':\r
            anchorPos = 't';\r
            targetPos = 'bl';\r
            offset = [20 + me.anchorOffset, -1];\r
            break;\r
        default:\r
            anchorPos = 'r';\r
            targetPos = 'tl';\r
            offset = [1, 12 + me.anchorOffset];\r
            break;\r
        }\r
        me.anchorEl.alignTo(me.el, anchorPos + '-' + targetPos, offset);\r
        me.anchorEl.setStyle('z-index', parseInt(me.el.getZIndex(), 10) || 0 + 1).setVisibilityMode(Ext.Element.DISPLAY);\r
    },\r
\r
    afterSetPosition: function(x, y) {\r
        var me = this;\r
        me.callParent(arguments);\r
        if (me.anchor) {\r
            me.syncAnchor();\r
            if (!me.anchorEl.isVisible()) {\r
                me.anchorEl.show();\r
            }\r
        } else {\r
            me.anchorEl.hide();\r
        }\r
    },\r
\r
    _timerNames: {},\r
\r
    /**\r
     * @private\r
     */\r
    clearTimer: function (name) {\r
        var me = this,\r
            names = me._timerNames,\r
            propName = names[name] || (names[name] = name + 'Timer'),\r
            timer = me[propName];\r
\r
        if (timer) {\r
            clearTimeout(timer);\r
            me[propName] = null;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    clearTimers: function() {\r
        var me = this;\r
        me.clearTimer('show');\r
        me.clearTimer('dismiss');\r
        me.clearTimer('hide');\r
    },\r
    \r
    onShow: function() {\r
        var me = this;\r
        me.callParent();\r
        me.mon(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);\r
    },\r
\r
    onHide: function() {\r
        var me = this;\r
        me.callParent();\r
        me.mun(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDocMouseDown: function(e) {\r
        var me = this;\r
        if (!me.closable && !e.within(me.el.dom)) {\r
            me.disable();\r
            Ext.defer(me.doEnable, 100, me);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doEnable: function() {\r
        if (!this.destroyed) {\r
            this.enable();\r
        }\r
    },\r
\r
    onDisable: function() {\r
        this.callParent();\r
        this.clearTimers();\r
        this.hide();\r
    },\r
\r
    beforeDestroy: function() {\r
        var me = this;\r
        me.clearTimers();\r
        Ext.destroy(me.anchorEl);\r
        delete me.anchorEl;\r
        delete me.target;\r
        delete me.anchorTarget;\r
        delete me.triggerElement;\r
        me.callParent();\r
    },\r
\r
    onDestroy: function() {\r
        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
        this.callParent();\r
    }\r
});\r