/**
- * @class Ext.menu.Item
- * @extends Ext.Component
-
- * A base class for all menu items that require menu-related functionality such as click handling,
+
/**
+ * 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
+ *
+ * @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',
-
+
/**
* @property {Boolean} activated
* Whether or not this item is currently activated
*/
+ /**
+ * @property {Ext.menu.Menu} parentMenu
+ * The parent Menu of this item.
+ */
+
/**
* @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}
@@ -136,61 +129,61 @@ Ext.define('Ext.menu.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
+ * The default {@link Ext.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>',
+ '<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="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
'<tpl if="menu">',
- '<img src="' + Ext.BLANK_IMAGE_URL + '" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
+ '<img id="{id}-arrowEl" src="{blank}" 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();
@@ -198,15 +191,15 @@ Ext.define('Ext.menu.Item', {
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();
@@ -215,10 +208,10 @@ Ext.define('Ext.menu.Item', {
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;
@@ -226,20 +219,20 @@ Ext.define('Ext.menu.Item', {
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) {
@@ -249,37 +242,37 @@ Ext.define('Ext.menu.Item', {
}
}
},
-
+
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 || [];
+ }
+ 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
@@ -287,7 +280,7 @@ Ext.define('Ext.menu.Item', {
* @param {Ext.menu.Item} item The activated item
*/
'activate',
-
+
/**
* @event click
* Fires when this item is clicked
@@ -295,7 +288,7 @@ Ext.define('Ext.menu.Item', {
* @param {Ext.EventObject} e The underyling {@link Ext.EventObject}.
*/
'click',
-
+
/**
* @event deactivate
* Fires when this tiem is deactivated
@@ -303,54 +296,54 @@ Ext.define('Ext.menu.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;
@@ -361,31 +354,27 @@ Ext.define('Ext.menu.Item', {
}
me.callParent(arguments);
},
-
+
onRender: function(ct, pos) {
var me = this,
- prefix = '.' + Ext.baseCSSPrefix;
-
+ blank = Ext.BLANK_IMAGE_URL;
+
Ext.applyIf(me.renderData, {
href: me.href || '#',
hrefTarget: me.hrefTarget,
- icon: me.icon || Ext.BLANK_IMAGE_URL,
- iconCls: me.iconCls,
+ icon: me.icon || blank,
+ iconCls: me.iconCls + (me.checkChangeDisabled ? ' ' + me.disabledCls : ''),
menu: Ext.isDefined(me.menu),
plain: me.plain,
- text: me.text
+ text: me.text,
+ blank: blank
});
-
- 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.addChildEls('itemEl', 'iconEl', 'textEl', 'arrowEl');
+
me.callParent(arguments);
},
-
+
/**
* Sets the {@link #click} handler of this item
* @param {Function} fn The handler function
@@ -395,51 +384,42 @@ Ext.define('Ext.menu.Item', {
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('');
- }
-
+ el = me.textEl || me.el;
+
me.text = text;
+
+ if (me.rendered) {
+ el.update(text || '');
+ // cannot just call doComponentLayout due to stretchmax
+ me.ownerCt.redoComponentLayout();
+ }
}
});