[extjs.git] / extjs / classic / classic / src / util / Focusable.js

/**\r
 * A mixin for individually focusable things (Components, Widgets, etc)\r
 */\r
Ext.define('Ext.util.Focusable', {\r
    mixinId: 'focusable',\r
\r
    /**\r
     * @property {Boolean} hasFocus\r
     * `true` if this component has focus.\r
     * @private\r
     */\r
    hasFocus: false,\r
    \r
    /**\r
     * @property {Boolean} focusable\r
     * @readonly\r
     *\r
     * `true` for interactive Components, `false` for static Components.\r
     * For Containers, this property reflects interactiveness of the\r
     * Container itself, not its children. See {@link #isFocusable}.\r
     *\r
     * **Note:** Plain components are static, so not focusable.\r
     */\r
    focusable: false,\r
    \r
    /**\r
     * @property {Ext.dom.Element} focusEl The component's focusEl.\r
     * Available after rendering.\r
     * @private\r
     */\r
    \r
    /**\r
     * @cfg {Number} [tabIndex] DOM tabIndex attribute for this Focusable's\r
     * focusEl.\r
     */\r
    \r
    /**\r
     * @cfg {String} [focusCls='x-focus'] CSS class that will be added to focused\r
     * Component, and removed when Component blurs.\r
     */\r
    focusCls: 'focus',\r
    \r
    /**\r
     * @event focus\r
     * Fires when this Component receives focus.\r
     * @param {Ext.Component} this\r
     * @param {Ext.event.Event} event The focus event.\r
     */\r
\r
    /**\r
     * @event blur\r
     * Fires when this Component loses focus.\r
     * @param {Ext.Component} this\r
     * @param {Ext.event.Event} event The blur event.\r
     */\r
    \r
    /**\r
     * @event focusenter\r
     * Fires when focus enters this Component's hierarchy.\r
     * @param {Ext.Component} this\r
     * @param {Ext.event.Event} event The focusenter event.\r
     */\r
    \r
    /**\r
     * @event focusleave\r
     * Fires when focus leaves this Component's hierarchy.\r
     * @param {Ext.Component} this\r
     * @param {Ext.event.Event} event The focusleave event.\r
     */\r
    \r
    /**\r
     * Template method to do any Focusable related initialization that\r
     * does not involve event listeners creation.\r
     * @protected\r
     */\r
    initFocusable: Ext.emptyFn,\r
    \r
    /**\r
     * Template method to do any event listener initialization for a Focusable.\r
     * This generally happens after the focusEl is available.\r
     * @protected\r
     */\r
    initFocusableEvents: function() {\r
        // If *not* naturally focusable, then we look for the tabIndex property\r
        // to be defined which indicates that the element should be made focusable.\r
        this.initFocusableElement();\r
    },\r
    \r
    /**\r
     * Returns the focus styling holder element associated with this Focusable.\r
     * By default it is the same element as {@link #getFocusEl getFocusEl}.\r
     *\r
     * @return {Ext.Element} The focus styling element.\r
     * @protected\r
     */\r
    getFocusClsEl: function() {\r
        return this.getFocusEl();\r
    },\r
\r
    /**\r
     * Returns the focus holder element associated with this Focusable. At the\r
     * level of the Focusable base, this function returns `this.el` (or for Widgets,\r
     * `this.element`).\r
     *\r
     * Subclasses with embedded focusable elements (such as Window, Field and Button)\r
     * should override this for use by {@link Ext.util.Focusable#method-focus focus}\r
     * method.\r
     *\r
     * @return {Ext.Element}\r
     * @protected\r
     */\r
    getFocusEl: function() {\r
        return this.element || this.el;\r
    },\r
\r
    destroyFocusable: function() {\r
        var me = this;\r
        \r
        Ext.destroy(me.focusListeners);\r
        \r
        me.focusListeners = me.focusEnterEvent = me.focusTask = null;\r
        me.focusEl = me.ariaEl = null;\r
    },\r
\r
    enableFocusable: Ext.emptyFn,\r
\r
    disableFocusable: function() {\r
        var me = this,\r
            focusTarget,\r
            focusCls = me.focusCls,\r
            focusClsEl;\r
\r
        // If this is disabled while focused, by default, focus would return to document.body.\r
        // This must be avoided, both for the convenience of keyboard users, and also\r
        // for when focus is tracked within a tree, such as below an expanded ComboBox.\r
        if (me.hasFocus) {\r
            focusTarget = me.findFocusTarget();\r
            if (focusTarget) {\r
                focusTarget.focus();\r
            }\r
        }\r
        focusClsEl = me.getFocusClsEl();\r
        \r
        if (focusCls && focusClsEl) {\r
            focusClsEl.removeCls(me.removeClsWithUI(focusCls, true));\r
        }\r
    },\r
    \r
    /**\r
     * Determine if this Focusable can receive focus at this time.\r
     *\r
     * Note that Containers can be non-focusable themselves while delegating\r
     * focus treatment to a child Component; see\r
     * {@link Ext.container.Container #defaultFocus} for more information.\r
     *\r
     * @param {Boolean} [deep=false] Optionally determine if the container itself\r
     * is focusable, or if container's focus is delegated to a child component\r
     * and that child is focusable.\r
     *\r
     * @return {Boolean} True if component is focusable, false if not.\r
     */\r
    isFocusable: function(deep) {\r
        var me = this,\r
            focusEl;\r
        \r
        if (!me.focusable && (!me.isContainer || !deep)) {\r
            return false;\r
        }\r
        \r
        focusEl = me.getFocusEl();\r
        \r
        if (focusEl && me.canFocus()) {\r
\r
            // getFocusEl might return a Component if a Container wishes to\r
            // delegate focus to a descendant. Both Component and Element\r
            // implement isFocusable, so always ask that.\r
            return focusEl.isFocusable(deep);\r
        }\r
        \r
        return false;\r
    },\r
    \r
    canFocus: function(/* private */ skipVisibility, includeFocusTarget) {\r
        var me = this,\r
            canFocus;\r
        \r
        // Containers may have focusable children while being non-focusable\r
        // themselves; this is why we only account for me.focusable for\r
        // ordinary Components here and below.\r
        canFocus = (me.isContainer || me.focusable) && me.rendered &&\r
                   !me.destroying && !me.destroyed && !me.disabled &&\r
                   (skipVisibility || me.isVisible(true));\r
        \r
        return canFocus || (includeFocusTarget && !!me.findFocusTarget());\r
    },\r
    \r
    /**\r
     * Try to focus this component.\r
     *\r
     * If this component is disabled, a close relation will be targeted for focus instead\r
     * to keep focus localized for keyboard users.\r
     * @param {Mixed} [selectText] If applicable, `true` to also select all the text in this component, or an array consisting of start and end (defaults to start) position of selection.\r
     * @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).\r
     * @param {Function} [callback] Only needed if the `delay` parameter is used. A function to call upon focus.\r
     * @param {Function} [scope] Only needed if the `delay` parameter is used. The scope (`this` reference) in which to execute the callback.\r
     * @return {Ext.Component} The focused Component. Usually `this` Component. Some Containers may\r
     * delegate focus to a descendant Component ({@link Ext.window.Window Window}s can do this through their\r
     * {@link Ext.window.Window#defaultFocus defaultFocus} config option. If this component is disabled, a closely\r
     * related component will be focused and that will be returned.\r
     */\r
    focus: function(selectText, delay, callback, scope) {\r
        var me = this,\r
            focusTarget, focusElDom, containerScrollTop;\r
\r
        if ((!me.focusable && !me.isContainer) || me.destroyed || me.destroying) {\r
            return;\r
        }\r
\r
        // If delay is wanted, queue a call to this function.\r
        if (delay) {\r
            me.getFocusTask().delay(Ext.isNumber(delay) ? delay : 10, me.focus, me, [selectText, false, callback, scope]);\r
            return me;\r
        }\r
\r
        // An immediate focus call must cancel any outstanding delayed focus calls.\r
        me.cancelFocus();\r
        \r
        // Assignment in conditional here to avoid calling getFocusEl()\r
        // if me.canFocus() returns false\r
        if (me.canFocus()) {\r
            if (focusTarget = me.getFocusEl()) {\r
\r
                // getFocusEl might return a Component if a Container wishes to delegate focus to a\r
                // descendant via its defaultFocus configuration.\r
                if (focusTarget.isComponent) {\r
                    return focusTarget.focus(selectText, delay, callback, scope);\r
                }\r
\r
                focusElDom = focusTarget.dom;\r
\r
                // If it was an Element with a dom property\r
                if (focusElDom) {\r
                    if (me.floating) {\r
                        containerScrollTop = me.container.dom.scrollTop;\r
                    }\r
\r
                    // Focus the element.\r
                    // The Ext.event.publisher.Focus publisher listens for global focus changes and\r
                    // The ComponentManager responds by invoking the onFocusEnter and onFocusLeave methods\r
                    // of the components involved.\r
                    focusTarget.focus();\r
\r
                    if (selectText) {\r
                        if (Ext.isArray(selectText)) {\r
                            if (me.selectText) {\r
                                me.selectText.apply(me, selectText);\r
                            }\r
                        } else if (focusElDom.select) {\r
                            // This method both focuses and selects the element.\r
                            focusElDom.select();\r
                        } else if (me.selectText) {\r
                            me.selectText();\r
                        }\r
                    }\r
\r
                    // Call the callback when focus is done\r
                    Ext.callback(callback, scope);\r
                }\r
\r
                // Focusing a floating Component brings it to the front of its stack.\r
                // this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.\r
                if (me.floating) {\r
                    if (containerScrollTop !== undefined) {\r
                        me.container.dom.scrollTop = containerScrollTop;\r
                    }\r
                }\r
            }\r
        }\r
        else {\r
            // If we are asked to focus while not able to focus though disablement/invisibility etc,\r
            // focus may revert to document.body if the current focus is being hidden or destroyed.\r
            // This must be avoided, both for the convenience of keyboard users, and also\r
            // for when focus is tracked within a tree, such as below an expanded ComboBox.\r
            focusTarget = me.findFocusTarget();\r
            \r
            if (focusTarget) {\r
                return focusTarget.focus(selectText, delay, callback, scope);\r
            }\r
        }\r
\r
        return me;\r
    },\r
\r
    /**\r
     * Cancel any deferred focus on this component\r
     * @protected\r
     */\r
    cancelFocus: function() {\r
        var task = this.getFocusTask();\r
\r
        if (task) {\r
            task.cancel();\r
        }\r
    },\r
    \r
    /**\r
     * @method\r
     * Template method to do any pre-blur processing.\r
     * @protected\r
     * @param {Ext.event.Event} e The event object\r
     */\r
    beforeBlur: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     */\r
    onBlur: function(e) {\r
        var me = this,\r
            container = me.focusableContainer,\r
            focusCls = me.focusCls,\r
            focusClsEl;\r
        \r
        if (!me.focusable || me.destroying) {\r
            return;\r
        }\r
\r
        me.beforeBlur(e);\r
        \r
        if (container) {\r
            container.beforeFocusableChildBlur(me, e);\r
        }\r
        \r
        focusClsEl = me.getFocusClsEl();\r
        \r
        if (focusCls && focusClsEl) {\r
            focusClsEl.removeCls(me.removeClsWithUI(focusCls, true));\r
        }\r
        \r
        if (me.validateOnBlur) {\r
            me.validate();\r
        }\r
        \r
        me.hasFocus = false;\r
        me.fireEvent('blur', me, e);\r
        me.postBlur(e);\r
        \r
        if (container) {\r
            container.afterFocusableChildBlur(me, e);\r
        }\r
    },\r
\r
    /**\r
     * @method\r
     * Template method to do any post-blur processing.\r
     * @protected\r
     * @param {Ext.event.Event} e The event object\r
     */\r
    postBlur: Ext.emptyFn,\r
\r
    /**\r
     * @method\r
     * Template method to do any pre-focus processing.\r
     * @protected\r
     * @param {Ext.event.Event} e The event object\r
     */\r
    beforeFocus: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     */\r
    onFocus: function(e) {\r
        var me = this,\r
            container = me.focusableContainer,\r
            focusCls = me.focusCls,\r
            focusClsEl;\r
        \r
        if (!me.focusable) {\r
            return;\r
        }\r
\r
        if (me.canFocus()) {\r
            me.beforeFocus(e);\r
            \r
            if (container) {\r
                container.beforeFocusableChildFocus(me, e);\r
            }\r
            \r
            focusClsEl = me.getFocusClsEl();\r
            \r
            if (focusCls && focusClsEl) {\r
                focusClsEl.addCls(me.addClsWithUI(focusCls, true));\r
            }\r
            \r
            if (!me.hasFocus) {\r
                me.hasFocus = true;\r
                me.fireEvent('focus', me, e);\r
            }\r
            \r
            me.postFocus(e);\r
            \r
            if (container) {\r
                container.afterFocusableChildFocus(me, e);\r
            }\r
        }\r
    },\r
    \r
    /**\r
     * @method\r
     * Template method to do any post-focus processing.\r
     * @protected\r
     * @param {Ext.event.Event} e The event object\r
     */\r
    postFocus: Ext.emptyFn,\r
    \r
    /**\r
     * Return the actual tabIndex for this Focusable.\r
     *\r
     * @return {Number} tabIndex attribute value\r
     */\r
    getTabIndex: function() {\r
        var me = this,\r
            el, index;\r
        \r
        if (!me.focusable) {\r
            return;\r
        }\r
        \r
        el = me.rendered && me.getFocusEl();\r
        \r
        if (el) {\r
            // getFocusEl may return a child Component\r
            if (el.isComponent) {\r
                index = el.getTabIndex();\r
            }\r
            \r
            // We can't query el.dom.tabIndex because IE8 will return 0\r
            // when tabIndex attribute is not present.\r
            else if (el.isElement) {\r
                index = el.getAttribute('tabIndex');\r
            }\r
            \r
            // A component can be configured with el: '#id' to look up\r
            // its main element from the DOM rather than render it; in\r
            // such case getTabIndex() may happen to be called before\r
            // said lookup has happened; indeterminate result follows.\r
            else {\r
                return;\r
            }\r
            \r
            me.tabIndex = index;\r
        }\r
        else {\r
            index = me.tabIndex;\r
        }\r
        \r
        return index - 0; // getAttribute returns a string\r
    },\r
    \r
    /**\r
     * Set the tabIndex property for this Focusable. If the focusEl\r
     * is avalable, set tabIndex attribute on it, too.\r
     *\r
     * @param {Number} newTabIndex new tabIndex to set\r
     */\r
    setTabIndex: function(newTabIndex, /* private */ focusEl) {\r
        var me = this,\r
            el;\r
        \r
        if (!me.focusable) {\r
            return;\r
        }\r
        \r
        me.tabIndex = newTabIndex;\r
        \r
        if (!me.rendered) {\r
            return;\r
        }\r
        \r
        el = focusEl || me.getFocusEl();\r
        \r
        if (el) {\r
            // getFocusEl may return a child Component\r
            if (el.isComponent) {\r
                el.setTabIndex(newTabIndex);\r
            }\r
            \r
            // Or if a component is configured with el: '#id', it may\r
            // still be a string by the time setTabIndex is called from\r
            // FocusableContainer.\r
            else if (el.isElement) {\r
                el.set({ tabIndex: newTabIndex });\r
            }\r
        }\r
    },\r
    \r
    /**\r
     * @template\r
     * @protected\r
     * Called when focus enters this Component's hierarchy\r
     * @param {Object} e\r
     * @param {Ext.event.Event} e.event The underlying DOM event.\r
     * @param {HTMLElement} e.target The element gaining focus.\r
     * @param {HTMLElement} e.relatedTarget The element losing focus.\r
     * @param {Ext.Component} e.toComponent The Component gaining focus.\r
     * @param {Ext.Component} e.fromComponent The Component losing focus.\r
     */\r
    onFocusEnter: function(e) {\r
        var me = this;\r
\r
        // Focusing must being a floating component to the front.\r
        // Only bring to front if this component is not the manager's\r
        // topmost component (may be a result of focusOnToFront).\r
        if (me.floating && me !== me.zIndexManager.getActive()) {\r
            me.toFront(true);\r
        }\r
\r
        // Save all information about how we received focus so that\r
        // we can do appropriate things when asked to revertFocus\r
        me.focusEnterEvent = e;\r
        me.containsFocus = true;\r
        me.fireEvent('focusenter', me, e);\r
    },\r
\r
    /**\r
     * @template\r
     * @protected\r
     * Called when focus exits from this Component's hierarchy\r
     * @param {Ext.event.Event} e\r
     * @param {Ext.event.Event} e.event The underlying DOM event.\r
     * @param {HTMLElement} e.target The element gaining focus.\r
     * @param {HTMLElement} e.relatedTarget The element losing focus.\r
     * @param {Ext.Component} e.toComponent The Component gaining focus.\r
     * @param {Ext.Component} e.fromComponent The Component losing focus.\r
     */\r
    onFocusLeave: function(e) {\r
        var me = this;\r
\r
        me.focusEnterEvent = null;\r
        me.containsFocus = false;\r
        me.fireEvent('focusleave', me, e);\r
    },\r
\r
    privates: {\r
        \r
        /**\r
         * Returns focus to the cached previously focused Component or element.\r
         *\r
         * Usually called by onHide.\r
         *\r
         * @private\r
         */\r
        revertFocus: function() {\r
            var me = this,\r
                previousFocus = me.previousFocus,\r
                focusEvent = me.focusEnterEvent,\r
                focusTarget;\r
            \r
            me.previousFocus = null;\r
            \r
            // Before hiding, restore focus to what was focused when we were shown\r
            // unless we're explicitly told not to (think Panel collapse/expand).\r
            if (me.preventRefocus || !me.el.contains(Ext.Element.getActiveElement())) {\r
                return;\r
            }\r
            \r
            // Floating menus need an ability to specify previous focus explicitly,\r
            // they take it from their parent upon show. Otherwise they would try to\r
            // refocus the menu item that opened the submenu, which is pointless.\r
            focusTarget = previousFocus || (focusEvent && focusEvent.fromComponent);\r
            \r
            // If reverting back to a Component, it will re-route to a close focusable relation\r
            // if it is not now focusable. But check that it's a Component because it can be\r
            // a Widget instead!\r
            if (focusTarget) {\r
                // Components have very useful canFocus method that we can use\r
                // to determine if the component can either focus itself, or find\r
                // another related target to focus. It is important that we don't\r
                // just blindly try to focus something for the sake of it!\r
                if (focusTarget.canFocus && focusTarget.canFocus(false, true)) {\r
                    focusTarget.focus();\r
                    \r
                    return;\r
                }\r
                else {\r
                    // focusTarget can be a plain DOM element, too\r
                    if (focusTarget.nodeType) {\r
                        focusTarget = Ext.fly(focusTarget);\r
                    }\r
                    \r
                    // Element can do a simple check to see if it's focusable.\r
                    if (focusTarget.isFocusable && focusTarget.isFocusable()) {\r
                        focusTarget.focus();\r
                        \r
                        return;\r
                    }\r
                }\r
            }\r
            \r
            // Try falling back to the relatedTarget of the focus event. If that\r
            // doesn't work, there's nothing else we can do. :(\r
            if (focusEvent) {\r
                focusTarget = Ext.fly(focusEvent.relatedTarget);\r
                \r
                // TODO: Remove extra check when IE8 retires.\r
                if (Ext.isIE8 || (focusTarget.isFocusable && focusTarget.isFocusable())) {\r
                    focusTarget.focus();\r
                }\r
            }\r
        },\r
\r
        /**\r
         * Finds an alternate Component to focus if this Component is disabled while focused, or\r
         * focused while disabled, or otherwise unable to focus.\r
         * \r
         * In both cases, focus must not be lost to document.body, but must move to an intuitively\r
         * connectible Component, either a sibling, or uncle or nephew.\r
         *\r
         * This is both for the convenience of keyboard users, and also for when focus is tracked\r
         * within a Component tree such as for ComboBoxes and their dropdowns.\r
         *\r
         * For example, a ComboBox with a PagingToolbar in is BoundList. If the "Next Page"\r
         * button is hit, the LoadMask shows and focuses, the next page is the last page, so\r
         * the "Next Page" button is disabled. When the LoadMask hides, it attempt to focus the\r
         * last focused Component which is the disabled "Next Page" button. In this situation,\r
         * focus should move to a sibling within the PagingToolbar.\r
         * \r
         * @return {Ext.Component} A closely related focusable Component to which focus can move.\r
         * @private\r
         */\r
        findFocusTarget: function() {\r
            var me = this,\r
                owner,\r
                focusTargets;\r
\r
            for (owner = me.up(':not([disabled])'); owner; owner = owner.up(':not([disabled])')) {\r
                // Use CQ to find a target that is focusable, and not this Component.\r
                // Cannot use owner.child() because the parent might not be a Container.\r
                // Non-Container Components may still have ownership relationships with\r
                // other Components. eg: BoundList with PagingToolbar\r
                focusTargets = Ext.ComponentQuery.query(':focusable:not([hasFocus])', owner);\r
                if (focusTargets.length) {\r
                    return focusTargets[0];\r
                }\r
\r
                // We found no focusable siblings in our owner, but the owner may itself be focusable,\r
                // it is not always a Container - could be the owning Field of a BoundList.\r
                if (owner.isFocusable && owner.isFocusable()) {\r
                    return owner;\r
                }\r
            }\r
        },\r
    \r
        /**\r
         * Sets up the focus listener on this Component's {@link #getFocusEl focusEl} if it has one.\r
         *\r
         * Form Components which must implicitly participate in tabbing order usually have a naturally\r
         * focusable element as their {@link #getFocusEl focusEl}, and it is the DOM event of that\r
         * receiving focus which drives the Component's `onFocus` handling, and the DOM event of it\r
         * being blurred which drives the `onBlur` handling.\r
         * @private\r
         */\r
        initFocusableElement: function() {\r
            var me = this,\r
                tabIndex = me.tabIndex,\r
                focusEl = me.getFocusEl();\r
\r
            if (focusEl && !focusEl.isComponent) {\r
                // Cache focusEl as a property for speedier lookups\r
                me.focusEl = focusEl;\r
                \r
                // focusEl is not available until after rendering, and rendering tabIndex\r
                // into focusEl is not always convenient. So we apply it here if Component's\r
                // tabIndex property is set and Component is otherwise focusable.\r
                if (tabIndex != null && me.canFocus(true)) {\r
                    me.setTabIndex(tabIndex, focusEl);\r
                }\r
                \r
                // This attribute is a shortcut to look up a Component by its Elements\r
                // It only makes sense on focusable elements, so we set it here\r
                focusEl.dom.setAttribute('data-componentid', me.id);\r
                \r
                // Only focusable components can be keyboard-interactive\r
                if (me.config.keyHandlers) {\r
                    me.initKeyHandlers(focusEl);\r
                }\r
            }\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        getFocusTask: function() {\r
            if (!this.focusTask) {\r
                this.focusTask = Ext.focusTask;\r
            }\r
            \r
            return this.focusTask;\r
        },\r
        \r
        /**\r
         * @private\r
         */\r
        handleFocusEvent: function(e) {\r
            var event;\r
            \r
            // handleFocusEvent and handleBlurEvent are called by ComponentManager\r
            // passing the normalized element event that might or might not cause\r
            // component focus or blur. The component itself makes the decision\r
            // whether focus/blur happens or not. This is necessary for components\r
            // that might have more than one focusable element within the component's\r
            // DOM structure, like Ext.button.Split.\r
            if (this.isFocusing(e)) {\r
                event = new Ext.event.Event(e.event);\r
                event.type = 'focus';\r
                event.relatedTarget = e.fromElement;\r
                event.target = e.toElement;\r
                \r
                this.onFocus(event);\r
            }\r
        },\r
        \r
        /**\r
         * @private\r
         */\r
        handleBlurEvent: function(e) {\r
            var event;\r
            \r
            if (this.isBlurring(e)) {\r
                event = new Ext.event.Event(e.event);\r
                event.type = 'blur';\r
                event.target = e.fromElement;\r
                event.relatedTarget = e.toElement;\r
                \r
                this.onBlur(event);\r
            }\r
        },\r
        \r
        /**\r
         * @private\r
         */\r
        isFocusing: function(e) {\r
            var from = e.fromElement,\r
                to = e.toElement,\r
                focusEl;\r
            \r
            if (this.focusable) {\r
                focusEl = this.getFocusEl();\r
            \r
                if (focusEl) {\r
                    if (focusEl.isComponent) {\r
                        return focusEl.isFocusing(from, to);\r
                    }\r
                    else {\r
                        return to === focusEl.dom && from !== to;\r
                    }\r
                }\r
            }\r
            \r
            return false;\r
        },\r
        \r
        /**\r
         * @private\r
         */\r
        isBlurring: function(e) {\r
            var from = e.fromElement,\r
                to = e.toElement,\r
                focusEl;\r
            \r
            if (this.focusable) {\r
                focusEl = this.getFocusEl();\r
            \r
                if (focusEl) {\r
                    if (focusEl.isComponent) {\r
                        return focusEl.isBlurring(from, to);\r
                    }\r
                    else {\r
                        return from === focusEl.dom && from !== to;\r
                    }\r
                }\r
            }\r
            \r
            return false;\r
        },\r
        \r
        /**\r
         * @private\r
         */\r
        blur: function() {\r
            var me = this,\r
                focusEl;\r
            \r
            if (!me.focusable || !me.canFocus()) {\r
                return;\r
            }\r
            \r
            focusEl = me.getFocusEl();\r
\r
            if (focusEl) {\r
                me.blurring = true;\r
                focusEl.blur();\r
                delete me.blurring;\r
            }\r
            \r
            return me;\r
        },\r
        \r
        disableTabbing: function() {\r
            var me = this,\r
                el = me.el,\r
                focusEl;\r
            \r
            if (el) {\r
                el.saveTabbableState();\r
            }\r
            \r
            focusEl = me.getFocusEl();\r
            \r
            if (focusEl) {\r
                // focusEl may happen to be a focus delegate for a container\r
                if (focusEl.isComponent) {\r
                    focusEl.disableTabbing();\r
                }\r
                \r
                // Alternatively focusEl may happen to be outside of the main el,\r
                // or else it can be a string reference to an element that\r
                // has not been resolved yet\r
                else if (focusEl.isElement && el && !el.contains(focusEl)) {\r
                    focusEl.saveTabbableState();\r
                }\r
            }\r
        },\r
        \r
        enableTabbing: function() {\r
            var me = this,\r
                el = me.el,\r
                focusEl;\r
            \r
            focusEl = me.getFocusEl();\r
            \r
            if (focusEl) {\r
                if (focusEl.isComponent) {\r
                    focusEl.enableTabbing();\r
                }\r
                else if (focusEl.isElement && el && !el.contains(focusEl)) {\r
                    focusEl.restoreTabbableState();\r
                }\r
            }\r
            \r
            if (el) {\r
                el.restoreTabbableState();\r
            }\r
        }\r
    }\r
},\r
\r
function() {\r
    // One global DelayedTask to assign focus\r
    // So that the last focus call wins.\r
    if (!Ext.focusTask) {\r
        Ext.focusTask = new Ext.util.DelayedTask();\r
    }\r
});\r