    /**
     * @class Ext.menu.Item
     * @extends Ext.Component

     * A base class for all menu items that require menu-related functionality such as click handling,
     * sub-menus, icons, etc.
     * {@img Ext.menu.Menu/Ext.menu.Menu.png Ext.menu.Menu component}
    __Example Usage:__
        Ext.create('Ext.menu.Menu', {
    		width: 100,
    		height: 100,
    		floating: false,  // usually you want this set to True (default)
    		renderTo: Ext.getBody(),  // usually rendered by it's containing component
    		items: [{
    		    text: 'icon item',
    		    iconCls: 'add16'
    		},{
    			text: 'text item',
    		},{
    			text: 'plain item',
    			plain: true
    		}]
    	});

     * @xtype menuitem
     * @markdown
     * @constructor
     * @param {Object} config The config object
     */
    Ext.define('Ext.menu.Item', {
        extend: 'Ext.Component',
        alias: 'widget.menuitem',
        alternateClassName: 'Ext.menu.TextItem',

        /**
         * @property {Boolean} activated
         * Whether or not this item is currently activated
         */

        /**
         * @cfg {String} activeCls
         * The CSS class added to the menu item when the item is activated (focused/mouseover).
         * Defaults to `Ext.baseCSSPrefix + 'menu-item-active'`.
         * @markdown
         */
        activeCls: Ext.baseCSSPrefix + 'menu-item-active',

        /**
         * @cfg {String} ariaRole @hide
         */
        ariaRole: 'menuitem',

        /**
         * @cfg {Boolean} canActivate
         * Whether or not this menu item can be activated when focused/mouseovered. Defaults to `true`.
         * @markdown
         */
        canActivate: true,

        /**
         * @cfg {Number} clickHideDelay
         * The delay in milliseconds to wait before hiding the menu after clicking the menu item.
         * This only has an effect when `hideOnClick: true`. Defaults to `1`.
         * @markdown
         */
        clickHideDelay: 1,

        /**
         * @cfg {Boolean} destroyMenu
         * Whether or not to destroy any associated sub-menu when this item is destroyed. Defaults to `true`.
         */
        destroyMenu: true,

        /**
         * @cfg {String} disabledCls
         * The CSS class added to the menu item when the item is disabled.
         * Defaults to `Ext.baseCSSPrefix + 'menu-item-disabled'`.
         * @markdown
         */
        disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled',

        /**
         * @cfg {String} href
         * The href attribute to use for the underlying anchor link. Defaults to `#`.
         * @markdown
         */

         /**
          * @cfg {String} hrefTarget
          * The target attribute to use for the underlying anchor link. Defaults to `undefined`.
          * @markdown
          */

        /**
         * @cfg {Boolean} hideOnClick
         * Whether to not to hide the owning menu when this item is clicked. Defaults to `true`.
         * @markdown
         */
        hideOnClick: true,

        /**
         * @cfg {String} icon
         * The path to an icon to display in this item. Defaults to `Ext.BLANK_IMAGE_URL`.
         * @markdown
         */

        /**
         * @cfg {String} iconCls
         * A CSS class that specifies a `background-image` to use as the icon for this item. Defaults to `undefined`.
         * @markdown
         */

        isMenuItem: true,

        /**
         * @cfg {Mixed} menu
         * Either an instance of {@link Ext.menu.Menu} or a config object for an {@link Ext.menu.Menu}
         * which will act as a sub-menu to this item.
         * @markdown
         * @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured.
         */

        /**
         * @cfg {String} menuAlign
         * The default {@link Ext.core.Element#getAlignToXY Ext.Element.getAlignToXY} anchor position value for this
         * item's sub-menu relative to this item's position. Defaults to `'tl-tr?'`.
         * @markdown
         */
        menuAlign: 'tl-tr?',

        /**
         * @cfg {Number} menuExpandDelay
         * The delay in milliseconds before this item's sub-menu expands after this item is moused over. Defaults to `200`.
         * @markdown
         */
        menuExpandDelay: 200,

        /**
         * @cfg {Number} menuHideDelay
         * The delay in milliseconds before this item's sub-menu hides after this item is moused out. Defaults to `200`.
         * @markdown
         */
        menuHideDelay: 200,

        /**
         * @cfg {Boolean} plain
         * Whether or not this item is plain text/html with no icon or visual activation. Defaults to `false`.
         * @markdown
         */

        renderTpl: [
            '<tpl if="plain">',
                '{text}',
            '</tpl>',
            '<tpl if="!plain">',
                '<a class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
                    '<img src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
                    '<span class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
                    '<tpl if="menu">',
                        '<img src="' + Ext.BLANK_IMAGE_URL + '" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
                    '</tpl>',
                '</a>',
            '</tpl>'
        ],

        maskOnDisable: false,

        /**
         * @cfg {String} text
         * The text/html to display in this item. Defaults to `undefined`.
         * @markdown
         */

        activate: function() {
            var me = this;

            if (!me.activated && me.canActivate && me.rendered && !me.isDisabled() && me.isVisible()) {
                me.el.addCls(me.activeCls);
                me.focus();
                me.activated = true;
                me.fireEvent('activate', me);
            }
        },

        blur: function() {
            this.$focused = false;
            this.callParent(arguments);
        },

        deactivate: function() {
            var me = this;

            if (me.activated) {
                me.el.removeCls(me.activeCls);
                me.blur();
                me.hideMenu();
                me.activated = false;
                me.fireEvent('deactivate', me);
            }
        },

        deferExpandMenu: function() {
            var me = this;

            if (!me.menu.rendered || !me.menu.isVisible()) {
                me.parentMenu.activeChild = me.menu;
                me.menu.parentItem = me;
                me.menu.parentMenu = me.menu.ownerCt = me.parentMenu;
                me.menu.showBy(me, me.menuAlign);
            }
        },

        deferHideMenu: function() {
            if (this.menu.isVisible()) {
                this.menu.hide();
            }
        },

        deferHideParentMenus: function() {
            Ext.menu.Manager.hideAll();
        },

        expandMenu: function(delay) {
            var me = this;

            if (me.menu) {
                clearTimeout(me.hideMenuTimer);
                if (delay === 0) {
                    me.deferExpandMenu();
                } else {
                    me.expandMenuTimer = Ext.defer(me.deferExpandMenu, Ext.isNumber(delay) ? delay : me.menuExpandDelay, me);
                }
            }
        },

        focus: function() {
            this.$focused = true;
            this.callParent(arguments);
        },

        getRefItems: function(deep){
            var menu = this.menu,
                items;

            if (menu) {
                items = menu.getRefItems(deep);
                items.unshift(menu);
            }
            return items || [];
        },

        hideMenu: function(delay) {
            var me = this;

            if (me.menu) {
                clearTimeout(me.expandMenuTimer);
                me.hideMenuTimer = Ext.defer(me.deferHideMenu, Ext.isNumber(delay) ? delay : me.menuHideDelay, me);
            }
        },

        initComponent: function() {
            var me = this,
                prefix = Ext.baseCSSPrefix,
                cls = [prefix + 'menu-item'];

            me.addEvents(
                /**
                 * @event activate
                 * Fires when this item is activated
                 * @param {Ext.menu.Item} item The activated item
                 */
                'activate',

                /**
                 * @event click
                 * Fires when this item is clicked
                 * @param {Ext.menu.Item} item The item that was clicked
                 * @param {Ext.EventObject} e The underyling {@link Ext.EventObject}.
                 */
                'click',

                /**
                 * @event deactivate
                 * Fires when this tiem is deactivated
                 * @param {Ext.menu.Item} item The deactivated item
                 */
                'deactivate'
            );

            if (me.plain) {
                cls.push(prefix + 'menu-item-plain');
            }

            if (me.cls) {
                cls.push(me.cls);
            }

            me.cls = cls.join(' ');

            if (me.menu) {
                me.menu = Ext.menu.Manager.get(me.menu);
            }

            me.callParent(arguments);
        },

        onClick: function(e) {
            var me = this;

            if (!me.href) {
                e.stopEvent();
            }

            if (me.disabled) {
                return;
            }

            if (me.hideOnClick) {
                me.deferHideParentMenusTimer = Ext.defer(me.deferHideParentMenus, me.clickHideDelay, me);
            }

            Ext.callback(me.handler, me.scope || me, [me, e]);
            me.fireEvent('click', me, e);

            if (!me.hideOnClick) {
                me.focus();
            }
        },

        onDestroy: function() {
            var me = this;

            clearTimeout(me.expandMenuTimer);
            clearTimeout(me.hideMenuTimer);
            clearTimeout(me.deferHideParentMenusTimer);

            if (me.menu) {
                delete me.menu.parentItem;
                delete me.menu.parentMenu;
                delete me.menu.ownerCt;
                if (me.destroyMenu !== false) {
                    me.menu.destroy();
                }
            }
            me.callParent(arguments);
        },

        onRender: function(ct, pos) {
            var me = this,
                prefix = '.' + Ext.baseCSSPrefix;

            Ext.applyIf(me.renderData, {
                href: me.href || '#',
                hrefTarget: me.hrefTarget,
                icon: me.icon || Ext.BLANK_IMAGE_URL,
                iconCls: me.iconCls,
                menu: Ext.isDefined(me.menu),
                plain: me.plain,
                text: me.text
            });

            Ext.applyIf(me.renderSelectors, {
                itemEl: prefix + 'menu-item-link',
                iconEl: prefix + 'menu-item-icon',
                textEl: prefix + 'menu-item-text',
                arrowEl: prefix + 'menu-item-arrow'
            });

            me.callParent(arguments);
        },

        /**
         * Sets the {@link #click} handler of this item
         * @param {Function} fn The handler function
         * @param {Object} scope (optional) The scope of the handler function
         */
        setHandler: function(fn, scope) {
            this.handler = fn || null;
            this.scope = scope;
        },

        /**
         * Sets the {@link #iconCls} of this item
         * @param {String} iconCls The CSS class to set to {@link #iconCls}
         */
        setIconCls: function(iconCls) {
            var me = this;

            if (me.iconEl) {
                if (me.iconCls) {
                    me.iconEl.removeCls(me.iconCls);
                }

                if (iconCls) {
                    me.iconEl.addCls(iconCls);
                }
            }

            me.iconCls = iconCls;
        },

        /**
         * Sets the {@link #text} of this item
         * @param {String} text The {@link #text}
         */
        setText: function(text) {
            var me = this,
                el = me.textEl || me.el,
                newWidth;

            if (text && el) {
                el.update(text);

                if (me.textEl) {
                    // Resize the menu to fit the text
                    newWidth = me.textEl.getWidth() + me.iconEl.getWidth() + 25 + (me.arrowEl ? me.arrowEl.getWidth() : 0);
                    if (newWidth > me.itemEl.getWidth()) {
                        me.parentMenu.setWidth(newWidth);
                    }
                }
            } else if (el) {
                el.update('');
            }

            me.text = text;
        }
    });