[extjs.git] / extjs / classic / classic / src / menu / Item.js

/**\r
 * A base class for all menu items that require menu-related functionality such as click handling,\r
 * sub-menus, icons, etc.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.menu.Menu', {\r
 *         width: 100,\r
 *         height: 100,\r
 *         floating: false,  // usually you want this set to True (default)\r
 *         renderTo: Ext.getBody(),  // usually rendered by it's containing component\r
 *         items: [{\r
 *             text: 'icon item',\r
 *             iconCls: 'add16'\r
 *         },{\r
 *             text: 'text item'\r
 *         },{\r
 *             text: 'plain item',\r
 *             plain: true\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.menu.Item', {\r
    extend: 'Ext.Component',\r
    alias: 'widget.menuitem',\r
    alternateClassName: 'Ext.menu.TextItem',\r
\r
    /**\r
     * @property {Boolean} isMenuItem\r
     * `true` in this class to identify an object as an instantiated Menu Item, or subclass thereof.\r
     */\r
    isMenuItem: true,\r
\r
    mixins: [\r
        'Ext.mixin.Queryable'\r
    ],\r
\r
    /**\r
     * @property {Boolean} activated\r
     * Whether or not this item is currently activated\r
     */\r
    activated: false,\r
\r
    /**\r
     * @property {Ext.menu.Menu} parentMenu\r
     * The parent Menu of this item.\r
     */\r
\r
    /**\r
     * @cfg {String} activeCls\r
     * The CSS class added to the menu item when the item is focused.\r
     */\r
    activeCls: Ext.baseCSSPrefix + 'menu-item-active',\r
\r
    /**\r
     * @cfg {Boolean} canActivate\r
     * Whether or not this menu item can be focused.\r
     * @deprecated 5.1.0 Use the {@link #focusable} config.\r
     */\r
\r
    /**\r
     * @cfg {Number} clickHideDelay\r
     * The delay in milliseconds to wait before hiding the menu after clicking the menu item.\r
     * This only has an effect when `hideOnClick: true`.\r
     */\r
    clickHideDelay: 0,\r
\r
    /**\r
     * @cfg {Boolean} destroyMenu\r
     * Whether or not to destroy any associated sub-menu when this item is destroyed.\r
     */\r
    destroyMenu: true,\r
\r
    /**\r
     * @cfg {String} disabledCls\r
     * The CSS class added to the menu item when the item is disabled.\r
     */\r
    disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled',\r
\r
    /**\r
     * @cfg {String} [href='#']\r
     * The href attribute to use for the underlying anchor link.\r
     */\r
\r
    /**\r
     * @cfg {String} hrefTarget\r
     * The target attribute to use for the underlying anchor link.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} hideOnClick\r
     * Whether to not to hide the owning menu when this item is clicked.\r
     */\r
    hideOnClick: true,\r
\r
    /**\r
     * @cfg {String} [icon=Ext#BLANK_IMAGE_URL]\r
     * @inheritdoc Ext.panel.Header#icon\r
     */\r
\r
    /**\r
     * @cfg {String} iconCls\r
     * @inheritdoc Ext.panel.Header#cfg-iconCls\r
     */\r
\r
    /**\r
     * @cfg {Number/String} glyph\r
     * @inheritdoc Ext.panel.Header#glyph\r
     */\r
\r
    /**\r
     * @cfg {Ext.menu.Menu/Object} menu\r
     * Either an instance of {@link Ext.menu.Menu} or a config object for an {@link Ext.menu.Menu}\r
     * which will act as a sub-menu to this item.\r
     */\r
\r
    /**\r
     * @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured.\r
     */\r
\r
    /**\r
     * @cfg {String} menuAlign\r
     * The default {@link Ext.util.Positionable#getAlignToXY Ext.util.Positionable.getAlignToXY} anchor position value for this\r
     * item's sub-menu relative to this item's position.\r
     */\r
    menuAlign: 'tl-tr?',\r
\r
    /**\r
     * @cfg {Number} menuExpandDelay\r
     * The delay in milliseconds before this item's sub-menu expands after this item is moused over.\r
     */\r
    menuExpandDelay: 200,\r
\r
    /**\r
     * @cfg {Number} menuHideDelay\r
     * The delay in milliseconds before this item's sub-menu hides after this item is moused out.\r
     */\r
    menuHideDelay: 200,\r
\r
    /**\r
     * @cfg {Boolean} plain\r
     * Whether or not this item is plain text/html with no icon or visual submenu indication.\r
     */\r
\r
    /**\r
     * @cfg {String/Object} tooltip\r
     * The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or\r
     * QuickTips config object.\r
     */\r
\r
    /**\r
     * @cfg {String} tooltipType\r
     * The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.\r
     */\r
    tooltipType: 'qtip',\r
    \r
    focusable: true,\r
    ariaRole: 'menuitem',\r
    ariaEl: 'itemEl',\r
\r
    baseCls: Ext.baseCSSPrefix + 'menu-item',\r
    arrowCls: Ext.baseCSSPrefix + 'menu-item-arrow',\r
    baseIconCls: Ext.baseCSSPrefix + 'menu-item-icon',\r
    textCls: Ext.baseCSSPrefix + 'menu-item-text',\r
    indentCls: Ext.baseCSSPrefix + 'menu-item-indent',\r
    indentNoSeparatorCls: Ext.baseCSSPrefix + 'menu-item-indent-no-separator',\r
    indentRightIconCls: Ext.baseCSSPrefix + 'menu-item-indent-right-icon',\r
    indentRightArrowCls: Ext.baseCSSPrefix + 'menu-item-indent-right-arrow',\r
    linkCls: Ext.baseCSSPrefix + 'menu-item-link',\r
    linkHrefCls: Ext.baseCSSPrefix + 'menu-item-link-href',\r
\r
    childEls: [\r
        'itemEl', 'iconEl', 'textEl', 'arrowEl'\r
    ],\r
    \r
    renderTpl:\r
        '<tpl if="plain">' +\r
            '{text}' +\r
        '<tpl else>' +\r
            '<a id="{id}-itemEl" data-ref="itemEl"' +\r
                ' class="{linkCls}<tpl if="hasHref"> {linkHrefCls}</tpl>{childElCls}"' +\r
                ' href="{href}" ' +\r
                '<tpl if="hrefTarget"> target="{hrefTarget}"</tpl>' +\r
                ' hidefocus="true"' +\r
                // For most browsers the text is already unselectable but Opera needs an explicit unselectable="on".\r
                ' unselectable="on"' +\r
                '<tpl if="tabIndex != null">' +\r
                    ' tabindex="{tabIndex}"' +\r
                '</tpl>' +\r
                '<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>' +\r
            '>' +\r
                '<span id="{id}-textEl" data-ref="textEl" class="{textCls} {textCls}-{ui} {indentCls}{childElCls}" unselectable="on">{text}</span>' +\r
                '<tpl if="hasIcon">' +\r
                    '<div role="presentation" id="{id}-iconEl" data-ref="iconEl" class="{baseIconCls}-{ui} {baseIconCls}' +\r
                        '{[values.rightIcon ? "-right" : ""]} {iconCls}' +\r
                        '{childElCls} {glyphCls}" style="<tpl if="icon">background-image:url({icon});</tpl>' +\r
                        '<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">' +\r
                        '<tpl if="glyph">&#{glyph};</tpl>' +\r
                    '</div>' +\r
                '</tpl>' +\r
                '<tpl if="showCheckbox">' +\r
                    '<div role="presentation" id="{id}-checkEl" data-ref="checkEl" class="{baseIconCls}-{ui} {baseIconCls}' +\r
                        '{[(values.hasIcon && !values.rightIcon) ? "-right" : ""]} ' +\r
                        '{groupCls} {checkboxCls}{childElCls}">' +\r
                    '</div>' +\r
                '</tpl>' +\r
                '<tpl if="hasMenu">' +\r
                    '<div role="presentation" id="{id}-arrowEl" data-ref="arrowEl" class="{arrowCls} {arrowCls}-{ui}{childElCls}"></div>' +\r
                '</tpl>' +\r
            '</a>' +\r
        '</tpl>',\r
\r
    maskOnDisable: false,\r
\r
    iconAlign: 'left',\r
\r
    /**\r
     * @cfg {String} text\r
     * The text/html to display in this item.\r
     */\r
\r
    /**\r
     * @cfg {Function/String} handler\r
     * A function called when the menu item is clicked (can be used instead of {@link #click} event).\r
     * @cfg {Ext.menu.Item} handler.item The item that was clicked\r
     * @cfg {Ext.event.Event} handler.e The underlying {@link Ext.event.Event}.\r
     * @declarativeHandler\r
     */\r
\r
    /**\r
     * @event activate\r
     * Fires when this item is activated\r
     * @param {Ext.menu.Item} item The activated item\r
     */\r
\r
    /**\r
     * @event click\r
     * Fires when this item is clicked\r
     * @param {Ext.menu.Item} item The item that was clicked\r
     * @param {Ext.event.Event} e The underlying {@link Ext.event.Event}.\r
     */\r
\r
    /**\r
     * @event deactivate\r
     * Fires when this item is deactivated\r
     * @param {Ext.menu.Item} item The deactivated item\r
     */\r
\r
    /**\r
     * @event textchange\r
     * Fired when the item's text is changed by the {@link #setText} method.\r
     * @param {Ext.menu.Item} this\r
     * @param {String} oldText\r
     * @param {String} newText\r
     */\r
\r
    /**\r
     * @event iconchange\r
     * Fired when the item's icon is changed by the {@link #setIcon} or {@link #setIconCls} methods.\r
     * @param {Ext.menu.Item} this\r
     * @param {String} oldIcon\r
     * @param {String} newIcon\r
     */\r
\r
    initComponent: function() {\r
        var me = this,\r
            cls = me.cls ? [me.cls] : [],\r
            menu;\r
\r
        // During deprecation period of canActivate config, copy it into focusable config.\r
        if (me.hasOwnProperty('canActivate')) {\r
            me.focusable = me.canActivate;\r
        }\r
\r
        if (me.plain) {\r
            cls.push(Ext.baseCSSPrefix + 'menu-item-plain');\r
        }\r
\r
        if (cls.length) {\r
            me.cls  = cls.join(' ');\r
        }\r
\r
        if (me.menu) {\r
            menu = me.menu;\r
            me.menu = null;\r
            me.setMenu(menu);\r
        }\r
\r
        me.callParent(arguments);\r
    },\r
\r
    canFocus: function() {\r
        var me = this;\r
        \r
        // This is an override of the implementation in Focusable.\r
        // We do not refuse focus if the Item is disabled.\r
        // http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#menu\r
        // "Disabled menu items receive focus but have no action when Enter or Left Arrow/Right Arrow is pressed."\r
        // Test that deprecated canActivate config has not been set to false.\r
        return me.focusable && me.rendered && me.canActivate !== false &&\r
               !me.destroying && !me.destroyed &&\r
               me.isVisible(true);\r
    },\r
\r
    onFocus: function(e) {\r
        var me = this;\r
\r
        me.callParent([e]);\r
\r
        if (!me.disabled) {\r
            if (!me.plain) {\r
                me.addCls(me.activeCls);\r
            }\r
\r
            me.activated = true;\r
            if (me.hasListeners.activate) {\r
                me.fireEvent('activate', me);\r
            }\r
        }\r
    },\r
\r
    onFocusLeave: function(e) {\r
        var me = this;\r
\r
        me.callParent([e]);\r
\r
        if (me.activated) {\r
            if (!me.plain) {\r
                me.removeCls(me.activeCls);\r
            }\r
            me.doHideMenu();\r
            me.activated = false;\r
            if (me.hasListeners.deactivate) {\r
                me.fireEvent('deactivate', me);\r
            }\r
        }\r
    },\r
\r
    doHideMenu: function() {\r
        var menu = this.menu;\r
\r
        this.cancelDeferExpand();\r
        if (menu && menu.isVisible()) {\r
            menu.hide();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Hides the entire floating menu tree that we are within.\r
     * Walks up the refOwner axis hiding each Menu instance it find until it hits\r
     * a non-floating ancestor.\r
     */\r
    deferHideParentMenus: function() {\r
        for (var menu = this.getRefOwner(); menu && ((menu.isMenu && menu.floating) || menu.isMenuItem); menu = menu.getRefOwner()) {\r
            if (menu.isMenu) {\r
                menu.hide();\r
            }\r
        }\r
    },\r
\r
    expandMenu: function(event, delay) {\r
        var me = this;\r
\r
        if (me.activated && me.menu) {\r
\r
            // hideOnClick makes no sense when there's a child menu\r
            me.hideOnClick = false;\r
\r
            me.cancelDeferHide();\r
\r
            // Allow configuration of zero to perform immediate expansion.\r
            delay = delay == null ? me.menuExpandDelay : delay;\r
            if (delay === 0) {\r
                me.doExpandMenu(event);\r
            } else {\r
                me.cancelDeferExpand();\r
                // Delay can't be 0 by this point\r
                me.expandMenuTimer = Ext.defer(me.doExpandMenu, delay, me, [event]);\r
            }\r
        }\r
    },\r
\r
    doExpandMenu: function(clickEvent) {\r
        var me = this,\r
            menu = me.menu;\r
\r
        if (!menu.isVisible()) {\r
            me.parentMenu.activeChild = menu;\r
            menu.ownerCmp = me;\r
            menu.parentMenu = me.parentMenu;\r
            menu.constrainTo = document.body;\r
\r
            // Pointer-invoked menus do not auto focus, key invoked ones do.\r
            menu.autoFocus = !clickEvent || !clickEvent.pointerType;\r
            menu.showBy(me, me.menuAlign);\r
        }\r
    },\r
\r
    getRefItems: function(deep) {\r
        var menu = this.menu,\r
            items;\r
\r
        if (menu) {\r
            items = menu.getRefItems(deep);\r
            items.unshift(menu);\r
        }\r
        return items || [];\r
    },\r
\r
    getValue: function () {\r
        return this.value;\r
    },\r
\r
    hideMenu: function(delay) {\r
        var me = this;\r
\r
        if (me.menu) {\r
            me.cancelDeferExpand();\r
            me.hideMenuTimer = Ext.defer(me.doHideMenu, Ext.isNumber(delay) ? delay : me.menuHideDelay, me);\r
        }\r
    },\r
\r
    onClick: function (e) {\r
        var me = this,\r
            clickHideDelay = me.clickHideDelay,\r
            browserEvent = e.browserEvent,\r
            clickResult, preventDefault;\r
\r
        if (!me.href || me.disabled) {\r
            e.stopEvent();\r
            if (me.disabled) {\r
                return false;\r
            }\r
        }\r
\r
        if (me.disabled || me.handlingClick) {\r
            return;\r
        }\r
\r
        if (me.hideOnClick) {\r
            // on mobile webkit, when the menu item has an href, a longpress will \r
            // trigger the touch call-out menu to show.  If this is the case, the tap \r
            // event object's browser event type will be 'touchcancel', and we do not \r
            // want to hide the menu.\r
            \r
            // items with submenus are activated by touchstart on mobile browsers, so\r
            // we cannot hide the menu on "tap"\r
            if (!clickHideDelay) {\r
                me.deferHideParentMenus();\r
            } else {\r
                me.deferHideParentMenusTimer = Ext.defer(me.deferHideParentMenus, clickHideDelay, me);\r
            }\r
        }\r
\r
        // Click event may have destroyed the menu, don't do anything further\r
        clickResult = me.fireEvent('click', me, e);\r
        if (me.destroyed) {\r
            return;\r
        }\r
\r
        if (clickResult !== false && me.handler) {\r
            Ext.callback(me.handler, me.scope, [me, e], 0, me);\r
        }\r
\r
        // If there's an href, invoke dom.click() after we've fired the click event in case a click\r
        // listener wants to handle it.\r
        //\r
        // Note that we're having to do this because the key navigation code will blindly call stopEvent()\r
        // on all key events that it handles!\r
        //\r
        // But, we need to check the browser event object that was passed to the listeners to determine if\r
        // the default action has been prevented.  If so, we don't want to honor the .href config.\r
        if (Ext.isIE9m) {\r
            // Here we need to invert the value since it's meaning is the opposite of defaultPrevented.\r
            preventDefault = browserEvent.returnValue === false ? true : false;\r
        } else {\r
            preventDefault = !!browserEvent.defaultPrevented;\r
        }\r
\r
        // We only manually need to trigger the click event if it's come from a key event.\r
        if (me.href && e.type !== 'click' && !preventDefault) {\r
            me.handlingClick = true;\r
            me.itemEl.dom.click();\r
            me.handlingClick = false;\r
        }\r
\r
        if (!me.hideOnClick) {\r
            me.focus();\r
        }\r
        return clickResult;\r
    },\r
\r
    onRemoved: function() {\r
        var me = this;\r
\r
        // Removing the active item, must deactivate it.\r
        if (me.activated && me.parentMenu.activeItem === me) {\r
            me.parentMenu.deactivateActiveItem();\r
        }\r
        me.callParent(arguments);\r
        me.parentMenu = me.ownerCmp = null;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    beforeDestroy: function() {\r
        var me = this;\r
        if (me.rendered) {\r
            me.clearTip();\r
        }\r
        me.callParent();\r
    },\r
\r
    onDestroy: function() {\r
        var me = this;\r
\r
        me.cancelDeferExpand();\r
        me.cancelDeferHide();\r
        clearTimeout(me.deferHideParentMenusTimer);\r
\r
        me.setMenu(null);\r
        me.callParent(arguments);\r
    },\r
\r
    beforeRender: function() {\r
        var me = this,\r
            glyph = me.glyph,\r
            glyphFontFamily = Ext._glyphFontFamily,\r
            hasIcon = !!(me.icon || me.iconCls || glyph),\r
            hasMenu = !!me.menu,\r
            rightIcon = ((me.iconAlign === 'right') && !hasMenu),\r
            isCheckItem = me.isMenuCheckItem,\r
            indentCls = [],\r
            ownerCt = me.ownerCt,\r
            isOwnerPlain = ownerCt.plain,\r
            glyphParts;\r
\r
        if (me.plain) {\r
            me.ariaEl = 'el';\r
        }\r
        \r
        me.callParent();\r
\r
        if (hasIcon) {\r
            if (hasMenu && me.showCheckbox) {\r
                // nowhere to put the icon, menu arrow on one side, checkbox on the other.\r
                // TODO:  maybe put the icon or checkbox next to the arrow?\r
                hasIcon = false;\r
            }\r
        }\r
\r
        if (typeof glyph === 'string') {\r
            glyphParts = glyph.split('@');\r
            glyph = glyphParts[0];\r
            glyphFontFamily = glyphParts[1];\r
        }\r
\r
        if (!isOwnerPlain || (hasIcon && !rightIcon) || isCheckItem) {\r
            if (ownerCt.showSeparator && !isOwnerPlain) {\r
                indentCls.push(me.indentCls);\r
            } else {\r
                indentCls.push(me.indentNoSeparatorCls);\r
            }\r
        }\r
\r
        if (hasMenu) {\r
            indentCls.push(me.indentRightArrowCls);\r
        } else if (hasIcon && (rightIcon || isCheckItem)) {\r
            indentCls.push(me.indentRightIconCls);\r
        }\r
\r
        Ext.applyIf(me.renderData, {\r
            hasHref: !!me.href,\r
            href: me.href || '#',\r
            hrefTarget: me.hrefTarget,\r
            icon: me.icon,\r
            iconCls: me.iconCls,\r
            glyph: glyph,\r
            glyphCls: glyph ? Ext.baseCSSPrefix + 'menu-item-glyph' : undefined,\r
            glyphFontFamily: glyphFontFamily,\r
            hasIcon: hasIcon,\r
            hasMenu: hasMenu,\r
            indent: !isOwnerPlain || hasIcon || isCheckItem,\r
            isCheckItem: isCheckItem,\r
            rightIcon: rightIcon,\r
            plain: me.plain,\r
            text: me.text,\r
            arrowCls: me.arrowCls,\r
            baseIconCls: me.baseIconCls,\r
            textCls: me.textCls,\r
            indentCls: indentCls.join(' '),\r
            linkCls: me.linkCls,\r
            linkHrefCls: me.linkHrefCls,\r
            groupCls: me.group ? me.groupCls : '',\r
            tabIndex: me.tabIndex\r
        });\r
    },\r
\r
    onRender: function() {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        if (me.tooltip) {\r
            me.setTooltip(me.tooltip, true);\r
        }\r
    },\r
\r
    /**\r
     * Get the attached sub-menu for this item.\r
     * @return {Ext.menu.Menu} The sub-menu. `null` if it doesn't exist.\r
     */\r
    getMenu: function() {\r
        return this.menu || null;\r
    },\r
\r
    /**\r
     * Set a child menu for this item. See the {@link #cfg-menu} configuration.\r
     * @param {Ext.menu.Menu/Object} menu A menu, or menu configuration. null may be\r
     * passed to remove the menu.\r
     * @param {Boolean} [destroyMenu] True to destroy any existing menu. False to\r
     * prevent destruction. If not specified, the {@link #destroyMenu} configuration\r
     * will be used.\r
     */\r
    setMenu: function(menu, destroyMenu) {\r
        var me = this,\r
            oldMenu = me.menu,\r
            arrowEl = me.arrowEl,\r
            ariaDom = me.ariaEl.dom,\r
            ariaAttr, instanced;\r
\r
        if (oldMenu) {\r
            oldMenu.ownerCmp = oldMenu.parentMenu = null;\r
\r
            if (destroyMenu === true || (destroyMenu !== false && me.destroyMenu)) {\r
                Ext.destroy(oldMenu);\r
            }\r
            \r
            if (ariaDom) {\r
                ariaDom.removeAttribute('aria-haspopup');\r
                ariaDom.removeAttribute('aria-owns');\r
            }\r
            else {\r
                ariaAttr = (me.ariaRenderAttributes || (me.ariaRenderAttributes = {}));\r
                \r
                delete ariaAttr['aria-haspopup'];\r
                delete ariaAttr['aria-owns'];\r
            }\r
        }\r
        \r
        if (menu) {\r
            instanced = menu.isMenu;\r
            menu = me.menu = Ext.menu.Manager.get(menu, {\r
                ownerCmp: me,\r
                focusOnToFront: false\r
            });\r
            // We need to forcibly set this here because we could be passed\r
            // an existing menu, which means the config above won't get applied\r
            // during creation.\r
            menu.setOwnerCmp(me, instanced);\r
            \r
            if (ariaDom) {\r
                ariaDom.setAttribute('aria-haspopup', true);\r
                ariaDom.setAttribute('aria-owns', menu.id);\r
            }\r
            else {\r
                ariaAttr = (me.ariaRenderAttributes || (me.ariaRenderAttributes = {}));\r
                \r
                ariaAttr['aria-haspopup'] = true;\r
                ariaAttr['aria-owns'] = menu.id;\r
            }\r
        }\r
        else {\r
            menu = me.menu = null;\r
        }\r
\r
        if (menu && me.rendered && !me.destroying && arrowEl) {\r
            arrowEl[menu ? 'addCls' : 'removeCls'](me.arrowCls);\r
        }\r
    },\r
\r
    /**\r
     * Sets the {@link #click} handler of this item\r
     * @param {Function} fn The handler function\r
     * @param {Object} [scope] The scope of the handler function\r
     */\r
    setHandler: function(fn, scope) {\r
        this.handler = fn || null;\r
        this.scope = scope;\r
    },\r
\r
    /**\r
     * Sets the {@link #icon} on this item.\r
     * @param {String} icon The new icon\r
     */\r
    setIcon: function(icon){\r
        var iconEl = this.iconEl,\r
            oldIcon = this.icon;\r
        if (iconEl) {\r
            iconEl.src = icon || Ext.BLANK_IMAGE_URL;\r
        }\r
        this.icon = icon;\r
        this.fireEvent('iconchange', this, oldIcon, icon);\r
    },\r
\r
    /**\r
     * Sets the {@link #iconCls} of this item\r
     * @param {String} iconCls The CSS class to set to {@link #iconCls}\r
     */\r
    setIconCls: function(iconCls) {\r
        var me = this,\r
            iconEl = me.iconEl,\r
            oldCls = me.iconCls;\r
\r
        if (iconEl) {\r
            if (me.iconCls) {\r
                iconEl.removeCls(me.iconCls);\r
            }\r
\r
            if (iconCls) {\r
                iconEl.addCls(iconCls);\r
            }\r
        }\r
\r
        me.iconCls = iconCls;\r
        me.fireEvent('iconchange', me, oldCls, iconCls);\r
    },\r
\r
    /**\r
     * Sets the {@link #text} of this item\r
     * @param {String} text The {@link #text}\r
     */\r
    setText: function(text) {\r
        var me = this,\r
            el = me.textEl || me.el,\r
            oldText = me.text;\r
\r
        me.text = text;\r
\r
        if (me.rendered) {\r
            el.setHtml(text || '');\r
            me.updateLayout();\r
        }\r
        me.fireEvent('textchange', me, oldText, text);\r
    },\r
\r
    getTipAttr: function(){\r
        return this.tooltipType === 'qtip' ? 'data-qtip' : 'title';\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    clearTip: function() {\r
        if (Ext.quickTipsActive && Ext.isObject(this.tooltip)) {\r
            Ext.tip.QuickTipManager.unregister(this.itemEl);\r
        }\r
    },\r
\r
    /**\r
     * Sets the tooltip for this menu item.\r
     *\r
     * @param {String/Object} tooltip This may be:\r
     *\r
     *   - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip\r
     *   - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}.\r
     *\r
     * @return {Ext.menu.Item} this\r
     */\r
    setTooltip: function(tooltip, initial) {\r
        var me = this;\r
\r
        if (me.rendered) {\r
            if (!initial) {\r
                me.clearTip();\r
            }\r
\r
            if (Ext.quickTipsActive && Ext.isObject(tooltip)) {\r
                Ext.tip.QuickTipManager.register(Ext.apply({\r
                    target: me.itemEl.id\r
                },\r
                tooltip));\r
                me.tooltip = tooltip;\r
            } else {\r
                me.itemEl.dom.setAttribute(me.getTipAttr(), tooltip);\r
            }\r
        } else {\r
            me.tooltip = tooltip;\r
        }\r
\r
        return me;\r
    },\r
\r
    privates: {\r
        cancelDeferExpand: function() {\r
            window.clearTimeout(this.expandMenuTimer);\r
        },\r
\r
        cancelDeferHide: function(){\r
            window.clearTimeout(this.hideMenuTimer);\r
        },\r
\r
        getFocusEl: function() {\r
            return this.plain ? this.el : this.itemEl;\r
        }\r
    }\r
});\r