-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.menu.Item"></div>/**\r
- * @class Ext.menu.Item\r
- * @extends Ext.menu.BaseItem\r
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static\r
- * display items. Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific\r
- * activation and click handling.\r
- * @constructor\r
- * Creates a new Item\r
- * @param {Object} config Configuration options\r
- * @xtype menuitem\r
- */\r
-Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {\r
- <div id="prop-Ext.menu.Item-menu"></div>/**\r
- * @property menu\r
- * @type Ext.menu.Menu\r
- * The submenu associated with this Item if one was configured.\r
- */\r
- <div id="cfg-Ext.menu.Item-menu"></div>/**\r
- * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an\r
- * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.\r
- */\r
- <div id="cfg-Ext.menu.Item-icon"></div>/**\r
- * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL). If\r
- * icon is specified {@link #iconCls} should not be.\r
- */\r
- <div id="cfg-Ext.menu.Item-iconCls"></div>/**\r
- * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for\r
- * this item (defaults to ''). If iconCls is specified {@link #icon} should not be.\r
- */\r
- <div id="cfg-Ext.menu.Item-text"></div>/**\r
- * @cfg {String} text The text to display in this item (defaults to '').\r
- */\r
- <div id="cfg-Ext.menu.Item-href"></div>/**\r
- * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').\r
- */\r
- <div id="cfg-Ext.menu.Item-hrefTarget"></div>/**\r
- * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').\r
- */\r
- <div id="cfg-Ext.menu.Item-itemCls"></div>/**\r
- * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')\r
- */\r
- itemCls : 'x-menu-item',\r
- <div id="cfg-Ext.menu.Item-canActivate"></div>/**\r
- * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)\r
- */\r
- canActivate : true,\r
- <div id="cfg-Ext.menu.Item-showDelay"></div>/**\r
- * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)\r
- */\r
- showDelay: 200,\r
- // doc'd in BaseItem\r
- hideDelay: 200,\r
-\r
- // private\r
- ctype: 'Ext.menu.Item',\r
-\r
- initComponent : function(){\r
- Ext.menu.Item.superclass.initComponent.call(this);\r
- if(this.menu){\r
- this.menu = Ext.menu.MenuMgr.get(this.menu);\r
- this.menu.ownerCt = this;\r
- }\r
- },\r
-\r
- // private\r
- onRender : function(container, position){\r
- if (!this.itemTpl) {\r
- this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(\r
- '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',\r
- '<tpl if="hrefTarget">',\r
- ' target="{hrefTarget}"',\r
- '</tpl>',\r
- '>',\r
- '<img src="{icon}" class="x-menu-item-icon {iconCls}"/>',\r
- '<span class="x-menu-item-text">{text}</span>',\r
- '</a>'\r
- );\r
- }\r
- var a = this.getTemplateArgs();\r
- this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);\r
- this.iconEl = this.el.child('img.x-menu-item-icon');\r
- this.textEl = this.el.child('.x-menu-item-text');\r
- if(!this.href) { // if no link defined, prevent the default anchor event\r
- this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });\r
- }\r
- Ext.menu.Item.superclass.onRender.call(this, container, position);\r
- },\r
-\r
- getTemplateArgs: function() {\r
- return {\r
- id: this.id,\r
- cls: this.itemCls + (this.menu ? ' x-menu-item-arrow' : '') + (this.cls ? ' ' + this.cls : ''),\r
- href: this.href || '#',\r
- hrefTarget: this.hrefTarget,\r
- icon: this.icon || Ext.BLANK_IMAGE_URL,\r
- iconCls: this.iconCls || '',\r
- text: this.itemText||this.text||' '\r
- };\r
- },\r
-\r
- <div id="method-Ext.menu.Item-setText"></div>/**\r
- * Sets the text to display in this menu item\r
- * @param {String} text The text to display\r
- */\r
- setText : function(text){\r
- this.text = text||' ';\r
- if(this.rendered){\r
- this.textEl.update(this.text);\r
- this.parentMenu.layout.doAutoSize();\r
- }\r
- },\r
-\r
- <div id="method-Ext.menu.Item-setIconClass"></div>/**\r
- * Sets the CSS class to apply to the item's icon element\r
- * @param {String} cls The CSS class to apply\r
- */\r
- setIconClass : function(cls){\r
- var oldCls = this.iconCls;\r
- this.iconCls = cls;\r
- if(this.rendered){\r
- this.iconEl.replaceClass(oldCls, this.iconCls);\r
- }\r
- },\r
-\r
- //private\r
- beforeDestroy: function(){\r
- if (this.menu){\r
- delete this.menu.ownerCt;\r
- this.menu.destroy();\r
- }\r
- Ext.menu.Item.superclass.beforeDestroy.call(this);\r
- },\r
-\r
- // private\r
- handleClick : function(e){\r
- if(!this.href){ // if no link defined, stop the event automatically\r
- e.stopEvent();\r
- }\r
- Ext.menu.Item.superclass.handleClick.apply(this, arguments);\r
- },\r
-\r
- // private\r
- activate : function(autoExpand){\r
- if(Ext.menu.Item.superclass.activate.apply(this, arguments)){\r
- this.focus();\r
- if(autoExpand){\r
- this.expandMenu();\r
- }\r
- }\r
- return true;\r
- },\r
-\r
- // private\r
- shouldDeactivate : function(e){\r
- if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){\r
- if(this.menu && this.menu.isVisible()){\r
- return !this.menu.getEl().getRegion().contains(e.getPoint());\r
- }\r
- return true;\r
- }\r
- return false;\r
- },\r
-\r
- // private\r
- deactivate : function(){\r
- Ext.menu.Item.superclass.deactivate.apply(this, arguments);\r
- this.hideMenu();\r
- },\r
-\r
- // private\r
- expandMenu : function(autoActivate){\r
- if(!this.disabled && this.menu){\r
- clearTimeout(this.hideTimer);\r
- delete this.hideTimer;\r
- if(!this.menu.isVisible() && !this.showTimer){\r
- this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);\r
- }else if (this.menu.isVisible() && autoActivate){\r
- this.menu.tryActivate(0, 1);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- deferExpand : function(autoActivate){\r
- delete this.showTimer;\r
- this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);\r
- if(autoActivate){\r
- this.menu.tryActivate(0, 1);\r
- }\r
- },\r
-\r
- // private\r
- hideMenu : function(){\r
- clearTimeout(this.showTimer);\r
- delete this.showTimer;\r
- if(!this.hideTimer && this.menu && this.menu.isVisible()){\r
- this.hideTimer = this.deferHide.defer(this.hideDelay, this);\r
- }\r
- },\r
-\r
- // private\r
- deferHide : function(){\r
- delete this.hideTimer;\r
- if(this.menu.over){\r
- this.parentMenu.setActiveItem(this, false);\r
- }else{\r
- this.menu.hide();\r
- }\r
- }\r
-});\r
-Ext.reg('menuitem', Ext.menu.Item);</pre> \r
-</body>\r
-</html>
\ No newline at end of file
+<!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).
+ * Defaults to `Ext.baseCSSPrefix + 'menu-item-active'`.
+ */
+ activeCls: Ext.baseCSSPrefix + 'menu-item-active',
+
+<span id='Ext-menu-Item-cfg-ariaRole'> /**
+</span> * @cfg {String} ariaRole @hide
+ */
+ 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. Defaults to `true`.
+ */
+ 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`. Defaults to `1`.
+ */
+ 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. Defaults to `true`.
+ */
+ 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.
+ * Defaults to `Ext.baseCSSPrefix + 'menu-item-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. Defaults to `#`.
+ * @markdown
+ */
+
+<span id='Ext-menu-Item-cfg-hrefTarget'> /**
+</span> * @cfg {String} hrefTarget
+ * The target attribute to use for the underlying anchor link. Defaults to `undefined`.
+ * @markdown
+ */
+
+<span id='Ext-menu-Item-cfg-hideOnClick'> /**
+</span> * @cfg {Boolean} hideOnClick
+ * Whether to not to hide the owning menu when this item is clicked. Defaults to `true`.
+ * @markdown
+ */
+ 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`.
+ * @markdown
+ */
+
+<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. Defaults to `undefined`.
+ * @markdown
+ */
+
+ isMenuItem: true,
+
+<span id='Ext-menu-Item-property-menu'> /**
+</span> * @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.
+ */
+
+<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. Defaults to `'tl-tr?'`.
+ * @markdown
+ */
+ 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. Defaults to `200`.
+ * @markdown
+ */
+ 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. Defaults to `200`.
+ * @markdown
+ */
+ 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. Defaults to `false`.
+ * @markdown
+ */
+
+ renderTpl: [
+ '<tpl if="plain">',
+ '{text}',
+ '</tpl>',
+ '<tpl if="!plain">',
+ '<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 id="{id}-arrowEl" src="{blank}" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
+ '</tpl>',
+ '</a>',
+ '</tpl>'
+ ],
+
+ maskOnDisable: false,
+
+<span id='Ext-menu-Item-cfg-text'> /**
+</span> * @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(
+<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) {
+ 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,
+ blank = Ext.BLANK_IMAGE_URL;
+
+ Ext.applyIf(me.renderData, {
+ href: me.href || '#',
+ hrefTarget: me.hrefTarget,
+ icon: me.icon || blank,
+ iconCls: me.iconCls + (me.checkChangeDisabled ? ' ' + me.disabledCls : ''),
+ menu: Ext.isDefined(me.menu),
+ plain: me.plain,
+ text: me.text,
+ blank: blank
+ });
+
+ me.addChildEls('itemEl', 'iconEl', 'textEl', 'arrowEl');
+
+ me.callParent(arguments);
+ },
+
+<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 (optional) The scope of the handler function
+ */
+ setHandler: function(fn, scope) {
+ this.handler = fn || null;
+ this.scope = scope;
+ },
+
+<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;
+
+ if (me.iconEl) {
+ if (me.iconCls) {
+ me.iconEl.removeCls(me.iconCls);
+ }
+
+ if (iconCls) {
+ me.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 doComponentLayout due to stretchmax
+ me.ownerCt.redoComponentLayout();
+ }
+ }
+});
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff