<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The source code</title> <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="../resources/prettify/prettify.js"></script> <style type="text/css"> .highlight { display: block; background-color: #ddd; } </style> <script type="text/javascript"> function highlight() { document.getElementById(location.hash.replace(/#/, "")).className = "highlight"; } </script> </head> <body onload="prettyPrint(); highlight();"> <pre class="prettyprint lang-js"><span id='Ext-menu-Item'>/** </span> * A base class for all menu items that require menu-related functionality such as click handling, * sub-menus, icons, etc. * * @example * 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 * }] * }); */ Ext.define('Ext.menu.Item', { extend: 'Ext.Component', alias: 'widget.menuitem', alternateClassName: 'Ext.menu.TextItem', <span id='Ext-menu-Item-property-activated'> /** </span> * @property {Boolean} activated * Whether or not this item is currently activated */ <span id='Ext-menu-Item-property-parentMenu'> /** </span> * @property {Ext.menu.Menu} parentMenu * The parent Menu of this item. */ <span id='Ext-menu-Item-cfg-activeCls'> /** </span> * @cfg {String} activeCls * The CSS class added to the menu item when the item is activated (focused/mouseover). */ activeCls: Ext.baseCSSPrefix + 'menu-item-active', <span id='Ext-menu-Item-cfg-ariaRole'> /** </span> * @cfg {String} ariaRole * @private */ ariaRole: 'menuitem', <span id='Ext-menu-Item-cfg-canActivate'> /** </span> * @cfg {Boolean} canActivate * Whether or not this menu item can be activated when focused/mouseovered. */ canActivate: true, <span id='Ext-menu-Item-cfg-clickHideDelay'> /** </span> * @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`. */ clickHideDelay: 1, <span id='Ext-menu-Item-cfg-destroyMenu'> /** </span> * @cfg {Boolean} destroyMenu * Whether or not to destroy any associated sub-menu when this item is destroyed. */ destroyMenu: true, <span id='Ext-menu-Item-cfg-disabledCls'> /** </span> * @cfg {String} disabledCls * The CSS class added to the menu item when the item is disabled. */ disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled', <span id='Ext-menu-Item-cfg-href'> /** </span> * @cfg {String} [href='#'] * The href attribute to use for the underlying anchor link. */ <span id='Ext-menu-Item-cfg-hrefTarget'> /** </span> * @cfg {String} hrefTarget * The target attribute to use for the underlying anchor link. */ <span id='Ext-menu-Item-cfg-hideOnClick'> /** </span> * @cfg {Boolean} hideOnClick * Whether to not to hide the owning menu when this item is clicked. */ hideOnClick: true, <span id='Ext-menu-Item-cfg-icon'> /** </span> * @cfg {String} icon * The path to an icon to display in this item. * * Defaults to `Ext.BLANK_IMAGE_URL`. */ <span id='Ext-menu-Item-cfg-iconCls'> /** </span> * @cfg {String} iconCls * A CSS class that specifies a `background-image` to use as the icon for this item. */ isMenuItem: true, <span id='Ext-menu-Item-cfg-menu'> /** </span> * @cfg {Ext.menu.Menu/Object} 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. */ <span id='Ext-menu-Item-property-menu'> /** </span> * @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured. */ <span id='Ext-menu-Item-cfg-menuAlign'> /** </span> * @cfg {String} menuAlign * The default {@link Ext.Element#getAlignToXY Ext.Element.getAlignToXY} anchor position value for this * item's sub-menu relative to this item's position. */ menuAlign: 'tl-tr?', <span id='Ext-menu-Item-cfg-menuExpandDelay'> /** </span> * @cfg {Number} menuExpandDelay * The delay in milliseconds before this item's sub-menu expands after this item is moused over. */ menuExpandDelay: 200, <span id='Ext-menu-Item-cfg-menuHideDelay'> /** </span> * @cfg {Number} menuHideDelay * The delay in milliseconds before this item's sub-menu hides after this item is moused out. */ menuHideDelay: 200, <span id='Ext-menu-Item-cfg-plain'> /** </span> * @cfg {Boolean} plain * Whether or not this item is plain text/html with no icon or visual activation. */ <span id='Ext-menu-Item-cfg-tooltip'> /** </span> * @cfg {String/Object} tooltip * The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or * QuickTips config object. */ <span id='Ext-menu-Item-cfg-tooltipType'> /** </span> * @cfg {String} tooltipType * The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute. */ tooltipType: 'qtip', arrowCls: Ext.baseCSSPrefix + 'menu-item-arrow', childEls: [ 'itemEl', 'iconEl', 'textEl', 'arrowEl' ], renderTpl: [ '<tpl if="plain">', '{text}', '<tpl else>', '<a id="{id}-itemEl" class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">', '<img id="{id}-iconEl" src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />', '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="arrowCls">style="margin-right: 17px;"</tpl> >{text}</span>', '<img id="{id}-arrowEl" src="{blank}" class="{arrowCls}" />', '</a>', '</tpl>' ], maskOnDisable: false, <span id='Ext-menu-Item-cfg-text'> /** </span> * @cfg {String} text * The text/html to display in this item. */ <span id='Ext-menu-Item-cfg-handler'> /** </span> * @cfg {Function} handler * A function called when the menu item is clicked (can be used instead of {@link #click} event). * @cfg {Ext.menu.Item} handler.item The item that was clicked * @cfg {Ext.EventObject} handler.e The underyling {@link Ext.EventObject}. */ 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); } }, getFocusEl: function() { return this.itemEl; }, 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.activated && (!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(); } }, cancelDeferHide: function(){ clearTimeout(this.hideMenuTimer); }, deferHideParentMenus: function() { var ancestor; Ext.menu.Manager.hideAll(); if (!Ext.Element.getActiveElement()) { // If we have just hidden all Menus, and there is no currently focused element in the dom, transfer focus to the first visible ancestor if any. ancestor = this.up(':not([hidden])'); if (ancestor) { ancestor.focus(); } } }, expandMenu: function(delay) { var me = this; if (me.menu) { me.cancelDeferHide(); if (delay === 0) { me.deferExpandMenu(); } else { me.expandMenuTimer = Ext.defer(me.deferExpandMenu, Ext.isNumber(delay) ? delay : me.menuExpandDelay, me); } } }, 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'], menu; me.addEvents( <span id='Ext-menu-Item-event-activate'> /** </span> * @event activate * Fires when this item is activated * @param {Ext.menu.Item} item The activated item */ 'activate', <span id='Ext-menu-Item-event-click'> /** </span> * @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', <span id='Ext-menu-Item-event-deactivate'> /** </span> * @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) { menu = me.menu; delete me.menu; me.setMenu(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(); } }, onRemoved: function() { var me = this; // Removing the active item, must deactivate it. if (me.activated && me.parentMenu.activeItem === me) { me.parentMenu.deactivateActiveItem(); } me.callParent(arguments); delete me.parentMenu; delete me.ownerButton; }, // private beforeDestroy: function() { var me = this; if (me.rendered) { me.clearTip(); } me.callParent(); }, onDestroy: function() { var me = this; clearTimeout(me.expandMenuTimer); me.cancelDeferHide(); clearTimeout(me.deferHideParentMenusTimer); me.setMenu(null); me.callParent(arguments); }, beforeRender: function() { var me = this, blank = Ext.BLANK_IMAGE_URL, iconCls, arrowCls; me.callParent(); if (me.iconAlign === 'right') { iconCls = me.checkChangeDisabled ? me.disabledCls : ''; arrowCls = Ext.baseCSSPrefix + 'menu-item-icon-right ' + me.iconCls; } else { iconCls = me.iconCls + (me.checkChangeDisabled ? ' ' + me.disabledCls : ''); arrowCls = me.menu ? me.arrowCls : ''; } Ext.applyIf(me.renderData, { href: me.href || '#', hrefTarget: me.hrefTarget, icon: me.icon || blank, iconCls: iconCls, plain: me.plain, text: me.text, arrowCls: arrowCls, blank: blank }); }, onRender: function() { var me = this; me.callParent(arguments); if (me.tooltip) { me.setTooltip(me.tooltip, true); } }, <span id='Ext-menu-Item-method-setMenu'> /** </span> * Set a child menu for this item. See the {@link #cfg-menu} configuration. * @param {Ext.menu.Menu/Object} menu A menu, or menu configuration. null may be * passed to remove the menu. * @param {Boolean} [destroyMenu] True to destroy any existing menu. False to * prevent destruction. If not specified, the {@link #destroyMenu} configuration * will be used. */ setMenu: function(menu, destroyMenu) { var me = this, oldMenu = me.menu, arrowEl = me.arrowEl; if (oldMenu) { delete oldMenu.parentItem; delete oldMenu.parentMenu; delete oldMenu.ownerCt; delete oldMenu.ownerItem; if (destroyMenu === true || (destroyMenu !== false && me.destroyMenu)) { Ext.destroy(oldMenu); } } if (menu) { me.menu = Ext.menu.Manager.get(menu); me.menu.ownerItem = me; } else { me.menu = null; } if (me.rendered && !me.destroying && arrowEl) { arrowEl[me.menu ? 'addCls' : 'removeCls'](me.arrowCls); } }, <span id='Ext-menu-Item-method-setHandler'> /** </span> * Sets the {@link #click} handler of this item * @param {Function} fn The handler function * @param {Object} [scope] The scope of the handler function */ setHandler: function(fn, scope) { this.handler = fn || null; this.scope = scope; }, <span id='Ext-menu-Item-method-setIcon'> /** </span> * Sets the {@link #icon} on this item. * @param {String} icon The new icon */ setIcon: function(icon){ var iconEl = this.iconEl; if (iconEl) { iconEl.src = icon || Ext.BLANK_IMAGE_URL; } this.icon = icon; }, <span id='Ext-menu-Item-method-setIconCls'> /** </span> * Sets the {@link #iconCls} of this item * @param {String} iconCls The CSS class to set to {@link #iconCls} */ setIconCls: function(iconCls) { var me = this, iconEl = me.iconEl; if (iconEl) { if (me.iconCls) { iconEl.removeCls(me.iconCls); } if (iconCls) { iconEl.addCls(iconCls); } } me.iconCls = iconCls; }, <span id='Ext-menu-Item-method-setText'> /** </span> * Sets the {@link #text} of this item * @param {String} text The {@link #text} */ setText: function(text) { var me = this, el = me.textEl || me.el; me.text = text; if (me.rendered) { el.update(text || ''); // cannot just call layout on the component due to stretchmax me.ownerCt.updateLayout(); } }, getTipAttr: function(){ return this.tooltipType == 'qtip' ? 'data-qtip' : 'title'; }, //private clearTip: function() { if (Ext.isObject(this.tooltip)) { Ext.tip.QuickTipManager.unregister(this.itemEl); } }, <span id='Ext-menu-Item-method-setTooltip'> /** </span> * Sets the tooltip for this menu item. * * @param {String/Object} tooltip This may be: * * - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip * - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}. * * @return {Ext.menu.Item} this */ setTooltip: function(tooltip, initial) { var me = this; if (me.rendered) { if (!initial) { me.clearTip(); } if (Ext.isObject(tooltip)) { Ext.tip.QuickTipManager.register(Ext.apply({ target: me.itemEl.id }, tooltip)); me.tooltip = tooltip; } else { me.itemEl.dom.setAttribute(me.getTipAttr(), tooltip); } } else { me.tooltip = tooltip; } return me; } }); </pre> </body> </html>