/** * A base class for all menu items that require menu-related functionality such as click handling, * sub-menus, icons, etc. * * ```javascript * @example({ framework: 'extjs' }) * var mainPanel = Ext.create('Ext.Panel', { * fullscreen: true, * * items: { * xtype: 'menu', * floated: false, * docked: 'left', * items: [{ * text: 'regular item 1' * },{ * text: 'regular item 2' * },{ * text: 'regular item 3' * }] * } * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtButton, ExtContainer, ExtMenu, ExtMenuItem } from '@sencha/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <ExtContainer> * <ExtButton text="Menu"> * <ExtMenu rel="menu" > * <ExtMenuItem text="Mobile" name="ui-type" /> * <ExtMenuItem text="Desktop" name="ui-type"/> * </ExtMenu> * </ExtButton> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root', * styles: [``], * template: ` * <ExtContainer> * <ExtButton text="Menu"> * <ExtMenu rel="menu" > * <ExtMenuItem text="Mobile" name="ui-type" ></ExtMenuItem> * <ExtMenuItem text="Desktop" name="ui-type"></ExtMenuItem> * </ExtMenu> * </ExtButton> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * *<ext-container> * <ext-button text="Menu"> * <ext-menu rel="menu" > * <ext-menuitem text="Mobile" name="ui-type"></ext-menuitem> * <ext-menuitem text="Desktop" name="ui-type"/></ext-menuitem> * </ext-menu> * </ext-button> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-button.component'; * import '@sencha/ext-web-components/dist/ext-menu.component'; * import '@sencha/ext-web-components/dist/ext-menuitem.component'; * * export default class ItemComponent{} * ``` */Ext.define('Ext.menu.Item', { extend: 'Ext.Component', xtype: 'menuitem', alternateClassName: 'Ext.menu.TextItem', /** * @property {Boolean} isMenuItem * `true` in this class to identify an object as an instantiated Menu Item, or subclass thereof. */ isMenuItem: true, /** * @cfg {Number} menuExpandDelay * The delay in milliseconds before this item's sub-menu expands after this item is moused over. */ menuExpandDelay: 200, /** * @cfg {Number} menuHideDelay * The delay in milliseconds before this item's sub-menu hides after this item is moused out. */ menuHideDelay: 200, /** * @cfg {Object} scope * The scope (`this` refeence) in which the configured {@link #handler} will be executed, * unless the scope is a ViewController method nmame. * @accessor */ scope: null, /** * @cfg {Boolean} destroyMenu * Whether or not to destroy any associated sub-menu when this item is destroyed. */ destroyMenu: 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`. */ clickHideDelay: 0, /** * @cfg {Boolean} [hideOnClick=true] * Whether to not to hide the owning menu when this item is clicked. */ hideOnClick: true, config: { /** * @cfg {String} [href='#'] * The href attribute to use for the underlying anchor link. */ href: null, /** * @cfg {String} target * The target attribute to use for the underlying anchor link. */ target: null, /** * @cfg {Function/String} 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.event.Event} handler.e The underlying {@link Ext.event.Event}. * @controllable */ handler: null, /** * @cfg {String} [text] * The text to display in the menu item. */ text: null, /** * @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. */ menu: { lazy: true, $value: null }, /** * @cfg {String} menuAlign * The default * {@link Ext.util.Positionable#getAlignToXY Ext.util.Positionable.getAlignToXY} anchor * position value for this item's sub-menu relative to this item's position. */ menuAlign: 'tl-tr?', /** * @cfg {String} [icon] * The url of an icon to display as the background image of the icon. */ icon: null, /** * @cfg {String} [iconCls] * The CSS class to apply to the icon. */ iconCls: null, /** * @cfg {'left'/'right'} * The position of the icon relative to the text */ iconAlign: 'left', /** * @cfg {Boolean} [indented=true] * By default menu items reserve space at their start for an icon, depending on their * containing menu's {@link Ext.menu.Menu#indented} value. * * This option allows the indented behavior to be overridden for an individual menu item. */ indented: null, /** * @cfg {Boolean} [separator=false] * If `true`, this item places an {@link Ext.menu.Separator} above * itself unless it is the first visible item. */ separator: null }, inheritUi: true, ariaRole: 'menuitem', focusable: true, classCls: Ext.baseCSSPrefix + 'menuitem', activeCls: Ext.baseCSSPrefix + 'active', hasLeftIconCls: Ext.baseCSSPrefix + 'has-left-icon', hasRightIconCls: Ext.baseCSSPrefix + 'has-right-icon', hasArrowCls: Ext.baseCSSPrefix + 'has-arrow', hasHrefCls: Ext.baseCSSPrefix + 'has-href', isMenuOwner: true, template: [{ reference: 'bodyElement', tag: 'a', href: '#', cls: Ext.baseCSSPrefix + 'body-el ' + Ext.baseCSSPrefix + 'unselectable', children: [{ reference: 'leftIconWrapElement', cls: Ext.baseCSSPrefix + 'left-icon-wrap-el ' + Ext.baseCSSPrefix + 'icon-wrap-el', children: [{ reference: 'leftIconElement', cls: Ext.baseCSSPrefix + 'left-icon-el ' + Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon' }] }, { html: '\u00a0', reference: 'textElement', cls: Ext.baseCSSPrefix + 'text-el' }, { reference: 'rightIconWrapElement', cls: Ext.baseCSSPrefix + 'right-icon-wrap-el ' + Ext.baseCSSPrefix + 'icon-wrap-el', children: [{ reference: 'rightIconElement', cls: Ext.baseCSSPrefix + 'right-icon-el ' + Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon' }] }, { reference: 'arrowElement', cls: Ext.baseCSSPrefix + 'arrow-el ' + Ext.baseCSSPrefix + 'font-icon' }] }], ariaEl: 'bodyElement', focusEl: 'bodyElement', initialize: function() { this.callParent(); this.syncHasIconCls(); if (Ext.supports.Touch) { this.handleTouch(); } }, getFocusClsEl: function() { return this.el; }, /** * Expand this item's menu. * @param {Ext.event.Event} event Optional. Menus auto focus when invoked by key events. */ expandMenu: function(event) { var me = this, menu = me.getMenu(); // An item can be focused (active), but disabled. // Disabled items must not action on click (or left/right arrow) // http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#menu // "Disabled menu items receive focus but have no action when Enter or Left Arrow/Right // Arrow is pressed." if (!me.getDisabled() && menu) { // Needs an upward link menu.parentMenu = me.parentMenu; // hideOnClick makes no sense when there's a child menu me.hideOnClick = false; if (menu.isVisible()) { // Keyboard events should focus the first menu item even if it was already expanded if (event && event.type === 'keydown') { menu.focus(); } } else { // Pointer-invoked menus do not auto focus, key invoked ones do. menu.autoFocus = !event || !event.pointerType; menu.showBy(me, me.getMenuAlign(), { axisLock: true // Flips left/right when constrained // instead of covering the menu. }); } } }, getRefItems: function(deep) { // This is not a Container, so needs a special implementation to // return its subtree. var menu = this.getMenu(), items; if (menu) { items = menu.getRefItems(deep); items.unshift(menu); } return items || []; }, onFocusEnter: function(e) { var me = this; me.callParent([e]); // We do not refuse activation if the Item is disabled. // http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#menu // "Disabled menu items receive focus but have no action when Enter or Left Arrow/Right // Arrow is pressed." me.addCls(me.activeCls); me.activated = true; if (me.hasListeners.activate) { me.fireEvent('activate', me); } if (me.parentMenu) { me.parentMenu.setActiveItem(me); } }, onFocusLeave: function(e) { var me = this, // Do not call the menu into existence. // This property is set by updateMenu. menu = me.menu; me.callParent([e]); me.removeCls(me.activeCls); if (menu) { menu.hide(); } me.activated = false; if (me.hasListeners.deactivate) { me.fireEvent('deactivate', me); } if (me.parentMenu) { me.parentMenu.setActiveItem(null); } }, onRemoved: function(destroying) { this.callParent([destroying]); this.parentMenu = null; }, doDestroy: function() { var me = this; me.separatorElement = Ext.destroy(me.separatorElement); me.setMenu(null); me.linkClickListener = Ext.destroy(me.linkClickListener); me.callParent(); }, updateText: function(text) { if (text == null || text === '') { text = '\u00a0'; } this.textElement.dom.firstChild.data = text; }, applyMenu: function(menu) { var me = this, ariaDom = me.ariaEl.dom; if (menu) { if (menu.isMenu) { menu.setConstrainAlign(Ext.getBody()); menu.ownerCmp = me; } else { menu = Ext.menu.Menu.create(menu, { ownerCmp: me, $initParent: me, constrainAlign: Ext.getBody() }); } ariaDom.setAttribute('aria-haspopup', true); ariaDom.setAttribute('aria-owns', menu.id); } else { ariaDom.removeAttribute('aria-haspopup'); ariaDom.removeAttribute('aria-owns'); } me.toggleCls(me.hasArrowCls, !!menu); return menu; }, updateMenu: function(menu, oldMenu) { if (oldMenu) { if (this.destroyMenu) { Ext.destroy(oldMenu); } else { oldMenu.parentMenu = null; } } // A property which will only exist when the Menu has been instantiated. this.menu = menu; }, updateHref: function(href) { this.bodyElement.dom.href = href; this.toggleCls(this.hasHrefCls, !!href); }, updateTarget: function(target) { this.bodyElement.dom.target = target; }, updateIcon: function(icon) { var me = this, iconElement = (me.getIconAlign() === 'left') ? this.leftIconElement : this.rightIconElement; if (icon) { iconElement.setStyle('background-image', 'url(' + icon + ')'); } else { iconElement.setStyle('background-image', ''); } if (!me.isConfiguring) { me.syncHasIconCls(); } }, updateIconCls: function(iconCls, oldIconCls) { var me = this, iconElement = (me.getIconAlign() === 'left') ? this.leftIconElement : this.rightIconElement; if (iconCls) { iconElement.replaceCls(oldIconCls, iconCls); } else { iconElement.removeCls(oldIconCls); } if (!me.isConfiguring) { me.syncHasIconCls(); } }, updateIconAlign: function(iconAlign) { if (!this.isConfiguring) { this.syncHasIconCls(); } }, updateSeparator: function(separator) { var me = this, separatorElement = me.separatorElement; if (separator) { if (separatorElement) { separatorElement.show(); } else { me.separatorElement = separatorElement = Ext.Element.create({ cls: Ext.baseCSSPrefix + 'menuseparator' }); me.el.dom.insertBefore(separatorElement.dom, me.el.dom.firstChild); } } else if (separatorElement) { separatorElement.hide(); } }, privates: { /** * Function to add click listener for touch devices. */ handleTouch: function() { var me = this, linkEl = me.bodyElement; me.linkClickListener = linkEl.on({ click: me.onClick, capture: true, translate: false, scope: me, destroyable: true }); }, onSpace: function(e) { return this.onClick(e); }, onClick: function(e) { var me = this, href = me.getHref(), clickHideDelay = me.clickHideDelay, browserEvent = e.browserEvent, handler = me.getHandler(), isTouchEvent = e.pointerType === 'touch', clickResult; if (me.linkClickListener && !isTouchEvent && e.parentEvent) { // If this is a touch device and event is not a touch event // And is wrapped with parent event then ignore it // as we already have another click listener for this e.stopEvent(); return; } // Stop clicks on the anchor if there's no href, or we're disabled if ((!href || me.getDisabled()) && me.bodyElement.dom === e.getTarget('a')) { e.stopEvent(); if (me.getDisabled()) { return false; } } if (me.getDisabled() || me.handlingClick) { return; } if (me.hideOnClick && !me.getMenu()) { if (!clickHideDelay) { me.hideParentMenus(); } else { me.hideParentMenusTimer = Ext.defer(me.hideParentMenus, clickHideDelay, me); } } // Click event may have destroyed the menu, don't do anything further clickResult = me.fireEvent('click', me, e); // Click listener could have destroyed the menu and/or item. if (me.destroyed) { return; } if (clickResult !== false && handler) { Ext.callback(handler, me.scope, [me, e], 0, me); } // And the handler could have done the same. We check this twice // because if the menu was destroyed in the click listener, the handler // should not have been called. if (me.destroyed) { return; } // We only manually need to trigger the click event if it's come from a key event // and the event has not had preventDefault called. if (href && e.type !== 'click' && !browserEvent.defaultPrevented) { me.handlingClick = true; me.bodyElement.dom.click(); me.handlingClick = false; } return clickResult; }, /** * @private * Hides the entire floating menu tree that we are within. * Walks up the refOwner axis hiding each Menu instance it find until it hits * a non-floating ancestor. */ hideParentMenus: function() { var menu; for (menu = this.getRefOwner(); menu && ((menu.isMenu && menu.getFloated()) || menu.isMenuItem); menu = menu.getRefOwner() ) { if (menu.isMenu) { menu.hide(); } } }, hasIcon: function() { return !!(this.getIconCls() || this.getIcon()); }, syncHasIconCls: function() { var me = this, rightCls = me.hasRightIconCls, leftCls = me.hasLeftIconCls, iconAlign = me.getIconAlign(); if (me.hasIcon()) { if (iconAlign === 'left') { me.replaceCls(rightCls, leftCls); } else if (iconAlign === 'right') { me.replaceCls(leftCls, rightCls); } } else { me.removeCls([leftCls, rightCls]); } } }});