X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Item.html diff --git a/docs/source/Item.html b/docs/source/Item.html index d58c5a4d..3625bc3a 100644 --- a/docs/source/Item.html +++ b/docs/source/Item.html @@ -1,227 +1,428 @@ - - - - The source code - - - - -
/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
/** - * @class Ext.menu.Item - * @extends Ext.menu.BaseItem - * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static - * display items. Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific - * activation and click handling. - * @constructor - * Creates a new Item - * @param {Object} config Configuration options +Sencha Documentation Project
/**
+ * @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.menu.Item = Ext.extend(Ext.menu.BaseItem, {
-    
/** - * @property menu - * @type Ext.menu.Menu - * The submenu associated with this Item if one was configured. +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 {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an - * {@link Ext.menu.Menu} which acts as the submenu when this item is 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 */ -
/** - * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL). If - * icon is specified {@link #iconCls} should not be. + activeCls: Ext.baseCSSPrefix + 'menu-item-active', + + /** + * @cfg {String} ariaRole @hide */ -
/** - * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for - * this item (defaults to ''). If iconCls is specified {@link #icon} should not be. + ariaRole: 'menuitem', + + /** + * @cfg {Boolean} canActivate + * Whether or not this menu item can be activated when focused/mouseovered. Defaults to `true`. + * @markdown */ -
/** - * @cfg {String} text The text to display in this item (defaults to ''). + 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 */ -
/** - * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#'). + clickHideDelay: 1, + + /** + * @cfg {Boolean} destroyMenu + * Whether or not to destroy any associated sub-menu when this item is destroyed. Defaults to `true`. */ -
/** - * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to ''). + 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 */ -
/** - * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item') + disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled', + + /** + * @cfg {String} href + * The href attribute to use for the underlying anchor link. Defaults to `#`. + * @markdown */ - itemCls : 'x-menu-item', -
/** - * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true) + + /** + * @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 */ - canActivate : true, -
/** - * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200) + hideOnClick: true, + + /** + * @cfg {String} icon + * The path to an icon to display in this item. Defaults to `Ext.BLANK_IMAGE_URL`. + * @markdown */ - showDelay: 200, - // doc'd in BaseItem - hideDelay: 200, - - // private - ctype: 'Ext.menu.Item', - - initComponent : function(){ - Ext.menu.Item.superclass.initComponent.call(this); - if(this.menu){ - this.menu = Ext.menu.MenuMgr.get(this.menu); - this.menu.ownerCt = this; + + /** + * @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); } }, - - // private - onRender : function(container, position){ - if (!this.itemTpl) { - this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate( - '', - ' target="{hrefTarget}"', - '', - '>', - '', - '{text}', - '' - ); - } - var a = this.getTemplateArgs(); - this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true); - this.iconEl = this.el.child('img.x-menu-item-icon'); - this.textEl = this.el.child('.x-menu-item-text'); - if(!this.href) { // if no link defined, prevent the default anchor event - this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true }); - } - Ext.menu.Item.superclass.onRender.call(this, container, position); - }, - - getTemplateArgs: function() { - return { - id: this.id, - cls: this.itemCls + (this.menu ? ' x-menu-item-arrow' : '') + (this.cls ? ' ' + this.cls : ''), - href: this.href || '#', - hrefTarget: this.hrefTarget, - icon: this.icon || Ext.BLANK_IMAGE_URL, - iconCls: this.iconCls || '', - text: this.itemText||this.text||' ' - }; + + blur: function() { + this.$focused = false; + this.callParent(arguments); }, - -
/** - * Sets the text to display in this menu item - * @param {String} text The text to display - */ - setText : function(text){ - this.text = text||' '; - if(this.rendered){ - this.textEl.update(this.text); - this.parentMenu.layout.doAutoSize(); + + deactivate: function() { + var me = this; + + if (me.activated) { + me.el.removeCls(me.activeCls); + me.blur(); + me.hideMenu(); + me.activated = false; + me.fireEvent('deactivate', me); } }, - -
/** - * Sets the CSS class to apply to the item's icon element - * @param {String} cls The CSS class to apply - */ - setIconClass : function(cls){ - var oldCls = this.iconCls; - this.iconCls = cls; - if(this.rendered){ - this.iconEl.replaceClass(oldCls, this.iconCls); + + 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); } }, - - //private - beforeDestroy: function(){ - if (this.menu){ - delete this.menu.ownerCt; - this.menu.destroy(); + + deferHideMenu: function() { + if (this.menu.isVisible()) { + this.menu.hide(); } - Ext.menu.Item.superclass.beforeDestroy.call(this); }, - - // private - handleClick : function(e){ - if(!this.href){ // if no link defined, stop the event automatically - e.stopEvent(); - } - Ext.menu.Item.superclass.handleClick.apply(this, arguments); + + deferHideParentMenus: function() { + Ext.menu.Manager.hideAll(); }, - - // private - activate : function(autoExpand){ - if(Ext.menu.Item.superclass.activate.apply(this, arguments)){ - this.focus(); - if(autoExpand){ - this.expandMenu(); + + 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); } } - return true; }, - - // private - shouldDeactivate : function(e){ - if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){ - if(this.menu && this.menu.isVisible()){ - return !this.menu.getEl().getRegion().contains(e.getPoint()); - } - return true; + + 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); } - return false; }, - - // private - deactivate : function(){ - Ext.menu.Item.superclass.deactivate.apply(this, arguments); - this.hideMenu(); + + 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); }, - - // private - expandMenu : function(autoActivate){ - if(!this.disabled && this.menu){ - clearTimeout(this.hideTimer); - delete this.hideTimer; - if(!this.menu.isVisible() && !this.showTimer){ - this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]); - }else if (this.menu.isVisible() && autoActivate){ - this.menu.tryActivate(0, 1); - } + + 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(); } }, - - // private - deferExpand : function(autoActivate){ - delete this.showTimer; - this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu); - if(autoActivate){ - this.menu.tryActivate(0, 1); + + 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); }, - - // private - hideMenu : function(){ - clearTimeout(this.showTimer); - delete this.showTimer; - if(!this.hideTimer && this.menu && this.menu.isVisible()){ - this.hideTimer = this.deferHide.defer(this.hideDelay, this); + + 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; }, - - // private - deferHide : function(){ - delete this.hideTimer; - if(this.menu.over){ - this.parentMenu.setActiveItem(this, false); - }else{ - this.menu.hide(); + + /** + * 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; } }); -Ext.reg('menuitem', Ext.menu.Item);
- - \ No newline at end of file +
\ No newline at end of file