docs/source/Item.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-menu-Item-method-constructor'><span id='Ext-menu-Item'>/**
  19 </span></span> * @class Ext.menu.Item
  20  * @extends Ext.Component
  21
  22  * A base class for all menu items that require menu-related functionality such as click handling,
  23  * sub-menus, icons, etc.
  24  * {@img Ext.menu.Menu/Ext.menu.Menu.png Ext.menu.Menu component}
  25 __Example Usage:__
  26     Ext.create('Ext.menu.Menu', {
  27                 width: 100,
  28                 height: 100,
  29                 floating: false,  // usually you want this set to True (default)
  30                 renderTo: Ext.getBody(),  // usually rendered by it's containing component
  31                 items: [{
  32                     text: 'icon item',
  33                     iconCls: 'add16'
  34                 },{
  35                         text: 'text item',
  36                 },{
  37                         text: 'plain item',
  38                         plain: true
  39                 }]
  40         });
  41
  42  * @xtype menuitem
  43  * @markdown
  44  * @constructor
  45  * @param {Object} config The config object
  46  */
  47 Ext.define('Ext.menu.Item', {
  48     extend: 'Ext.Component',
  49     alias: 'widget.menuitem',
  50     alternateClassName: 'Ext.menu.TextItem',
  51
  52 <span id='Ext-menu-Item-property-activated'>    /**
  53 </span>     * @property {Boolean} activated
  54      * Whether or not this item is currently activated
  55      */
  56
  57 <span id='Ext-menu-Item-cfg-activeCls'>    /**
  58 </span>     * @cfg {String} activeCls
  59      * The CSS class added to the menu item when the item is activated (focused/mouseover).
  60      * Defaults to `Ext.baseCSSPrefix + 'menu-item-active'`.
  61      * @markdown
  62      */
  63     activeCls: Ext.baseCSSPrefix + 'menu-item-active',
  64
  65 <span id='Ext-menu-Item-cfg-ariaRole'>    /**
  66 </span>     * @cfg {String} ariaRole @hide
  67      */
  68     ariaRole: 'menuitem',
  69
  70 <span id='Ext-menu-Item-cfg-canActivate'>    /**
  71 </span>     * @cfg {Boolean} canActivate
  72      * Whether or not this menu item can be activated when focused/mouseovered. Defaults to `true`.
  73      * @markdown
  74      */
  75     canActivate: true,
  76
  77 <span id='Ext-menu-Item-cfg-clickHideDelay'>    /**
  78 </span>     * @cfg {Number} clickHideDelay
  79      * The delay in milliseconds to wait before hiding the menu after clicking the menu item.
  80      * This only has an effect when `hideOnClick: true`. Defaults to `1`.
  81      * @markdown
  82      */
  83     clickHideDelay: 1,
  84
  85 <span id='Ext-menu-Item-cfg-destroyMenu'>    /**
  86 </span>     * @cfg {Boolean} destroyMenu
  87      * Whether or not to destroy any associated sub-menu when this item is destroyed. Defaults to `true`.
  88      */
  89     destroyMenu: true,
  90
  91 <span id='Ext-menu-Item-cfg-disabledCls'>    /**
  92 </span>     * @cfg {String} disabledCls
  93      * The CSS class added to the menu item when the item is disabled.
  94      * Defaults to `Ext.baseCSSPrefix + 'menu-item-disabled'`.
  95      * @markdown
  96      */
  97     disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled',
  98
  99 <span id='Ext-menu-Item-cfg-href'>    /**
 100 </span>     * @cfg {String} href
 101      * The href attribute to use for the underlying anchor link. Defaults to `#`.
 102      * @markdown
 103      */
 104
 105 <span id='Ext-menu-Item-cfg-hrefTarget'>     /**
 106 </span>      * @cfg {String} hrefTarget
 107       * The target attribute to use for the underlying anchor link. Defaults to `undefined`.
 108       * @markdown
 109       */
 110
 111 <span id='Ext-menu-Item-cfg-hideOnClick'>    /**
 112 </span>     * @cfg {Boolean} hideOnClick
 113      * Whether to not to hide the owning menu when this item is clicked. Defaults to `true`.
 114      * @markdown
 115      */
 116     hideOnClick: true,
 117
 118 <span id='Ext-menu-Item-cfg-icon'>    /**
 119 </span>     * @cfg {String} icon
 120      * The path to an icon to display in this item. Defaults to `Ext.BLANK_IMAGE_URL`.
 121      * @markdown
 122      */
 123
 124 <span id='Ext-menu-Item-cfg-iconCls'>    /**
 125 </span>     * @cfg {String} iconCls
 126      * A CSS class that specifies a `background-image` to use as the icon for this item. Defaults to `undefined`.
 127      * @markdown
 128      */
 129
 130     isMenuItem: true,
 131
 132 <span id='Ext-menu-Item-property-menu'>    /**
 133 </span>     * @cfg {Mixed} menu
 134      * Either an instance of {@link Ext.menu.Menu} or a config object for an {@link Ext.menu.Menu}
 135      * which will act as a sub-menu to this item.
 136      * @markdown
 137      * @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured.
 138      */
 139
 140 <span id='Ext-menu-Item-cfg-menuAlign'>    /**
 141 </span>     * @cfg {String} menuAlign
 142      * The default {@link Ext.core.Element#getAlignToXY Ext.Element.getAlignToXY} anchor position value for this
 143      * item's sub-menu relative to this item's position. Defaults to `'tl-tr?'`.
 144      * @markdown
 145      */
 146     menuAlign: 'tl-tr?',
 147
 148 <span id='Ext-menu-Item-cfg-menuExpandDelay'>    /**
 149 </span>     * @cfg {Number} menuExpandDelay
 150      * The delay in milliseconds before this item's sub-menu expands after this item is moused over. Defaults to `200`.
 151      * @markdown
 152      */
 153     menuExpandDelay: 200,
 154
 155 <span id='Ext-menu-Item-cfg-menuHideDelay'>    /**
 156 </span>     * @cfg {Number} menuHideDelay
 157      * The delay in milliseconds before this item's sub-menu hides after this item is moused out. Defaults to `200`.
 158      * @markdown
 159      */
 160     menuHideDelay: 200,
 161
 162 <span id='Ext-menu-Item-cfg-plain'>    /**
 163 </span>     * @cfg {Boolean} plain
 164      * Whether or not this item is plain text/html with no icon or visual activation. Defaults to `false`.
 165      * @markdown
 166      */
 167
 168     renderTpl: [
 169         '&lt;tpl if=&quot;plain&quot;&gt;',
 170             '{text}',
 171         '&lt;/tpl&gt;',
 172         '&lt;tpl if=&quot;!plain&quot;&gt;',
 173             '&lt;a class=&quot;' + Ext.baseCSSPrefix + 'menu-item-link&quot; href=&quot;{href}&quot; &lt;tpl if=&quot;hrefTarget&quot;&gt;target=&quot;{hrefTarget}&quot;&lt;/tpl&gt; hidefocus=&quot;true&quot; unselectable=&quot;on&quot;&gt;',
 174                 '&lt;img src=&quot;{icon}&quot; class=&quot;' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}&quot; /&gt;',
 175                 '&lt;span class=&quot;' + Ext.baseCSSPrefix + 'menu-item-text&quot; &lt;tpl if=&quot;menu&quot;&gt;style=&quot;margin-right: 17px;&quot;&lt;/tpl&gt; &gt;{text}&lt;/span&gt;',
 176                 '&lt;tpl if=&quot;menu&quot;&gt;',
 177                     '&lt;img src=&quot;' + Ext.BLANK_IMAGE_URL + '&quot; class=&quot;' + Ext.baseCSSPrefix + 'menu-item-arrow&quot; /&gt;',
 178                 '&lt;/tpl&gt;',
 179             '&lt;/a&gt;',
 180         '&lt;/tpl&gt;'
 181     ],
 182
 183     maskOnDisable: false,
 184
 185 <span id='Ext-menu-Item-cfg-text'>    /**
 186 </span>     * @cfg {String} text
 187      * The text/html to display in this item. Defaults to `undefined`.
 188      * @markdown
 189      */
 190
 191     activate: function() {
 192         var me = this;
 193
 194         if (!me.activated &amp;&amp; me.canActivate &amp;&amp; me.rendered &amp;&amp; !me.isDisabled() &amp;&amp; me.isVisible()) {
 195             me.el.addCls(me.activeCls);
 196             me.focus();
 197             me.activated = true;
 198             me.fireEvent('activate', me);
 199         }
 200     },
 201
 202     blur: function() {
 203         this.$focused = false;
 204         this.callParent(arguments);
 205     },
 206
 207     deactivate: function() {
 208         var me = this;
 209
 210         if (me.activated) {
 211             me.el.removeCls(me.activeCls);
 212             me.blur();
 213             me.hideMenu();
 214             me.activated = false;
 215             me.fireEvent('deactivate', me);
 216         }
 217     },
 218
 219     deferExpandMenu: function() {
 220         var me = this;
 221
 222         if (!me.menu.rendered || !me.menu.isVisible()) {
 223             me.parentMenu.activeChild = me.menu;
 224             me.menu.parentItem = me;
 225             me.menu.parentMenu = me.menu.ownerCt = me.parentMenu;
 226             me.menu.showBy(me, me.menuAlign);
 227         }
 228     },
 229
 230     deferHideMenu: function() {
 231         if (this.menu.isVisible()) {
 232             this.menu.hide();
 233         }
 234     },
 235
 236     deferHideParentMenus: function() {
 237         Ext.menu.Manager.hideAll();
 238     },
 239
 240     expandMenu: function(delay) {
 241         var me = this;
 242
 243         if (me.menu) {
 244             clearTimeout(me.hideMenuTimer);
 245             if (delay === 0) {
 246                 me.deferExpandMenu();
 247             } else {
 248                 me.expandMenuTimer = Ext.defer(me.deferExpandMenu, Ext.isNumber(delay) ? delay : me.menuExpandDelay, me);
 249             }
 250         }
 251     },
 252
 253     focus: function() {
 254         this.$focused = true;
 255         this.callParent(arguments);
 256     },
 257
 258     getRefItems: function(deep){
 259         var menu = this.menu,
 260             items;
 261
 262         if (menu) {
 263             items = menu.getRefItems(deep);
 264             items.unshift(menu);
 265         }
 266         return items || [];
 267     },
 268
 269     hideMenu: function(delay) {
 270         var me = this;
 271
 272         if (me.menu) {
 273             clearTimeout(me.expandMenuTimer);
 274             me.hideMenuTimer = Ext.defer(me.deferHideMenu, Ext.isNumber(delay) ? delay : me.menuHideDelay, me);
 275         }
 276     },
 277
 278     initComponent: function() {
 279         var me = this,
 280             prefix = Ext.baseCSSPrefix,
 281             cls = [prefix + 'menu-item'];
 282
 283         me.addEvents(
 284 <span id='Ext-menu-Item-event-activate'>            /**
 285 </span>             * @event activate
 286              * Fires when this item is activated
 287              * @param {Ext.menu.Item} item The activated item
 288              */
 289             'activate',
 290
 291 <span id='Ext-menu-Item-event-click'>            /**
 292 </span>             * @event click
 293              * Fires when this item is clicked
 294              * @param {Ext.menu.Item} item The item that was clicked
 295              * @param {Ext.EventObject} e The underyling {@link Ext.EventObject}.
 296              */
 297             'click',
 298
 299 <span id='Ext-menu-Item-event-deactivate'>            /**
 300 </span>             * @event deactivate
 301              * Fires when this tiem is deactivated
 302              * @param {Ext.menu.Item} item The deactivated item
 303              */
 304             'deactivate'
 305         );
 306
 307         if (me.plain) {
 308             cls.push(prefix + 'menu-item-plain');
 309         }
 310
 311         if (me.cls) {
 312             cls.push(me.cls);
 313         }
 314
 315         me.cls = cls.join(' ');
 316
 317         if (me.menu) {
 318             me.menu = Ext.menu.Manager.get(me.menu);
 319         }
 320
 321         me.callParent(arguments);
 322     },
 323
 324     onClick: function(e) {
 325         var me = this;
 326
 327         if (!me.href) {
 328             e.stopEvent();
 329         }
 330
 331         if (me.disabled) {
 332             return;
 333         }
 334
 335         if (me.hideOnClick) {
 336             me.deferHideParentMenusTimer = Ext.defer(me.deferHideParentMenus, me.clickHideDelay, me);
 337         }
 338
 339         Ext.callback(me.handler, me.scope || me, [me, e]);
 340         me.fireEvent('click', me, e);
 341
 342         if (!me.hideOnClick) {
 343             me.focus();
 344         }
 345     },
 346
 347     onDestroy: function() {
 348         var me = this;
 349
 350         clearTimeout(me.expandMenuTimer);
 351         clearTimeout(me.hideMenuTimer);
 352         clearTimeout(me.deferHideParentMenusTimer);
 353
 354         if (me.menu) {
 355             delete me.menu.parentItem;
 356             delete me.menu.parentMenu;
 357             delete me.menu.ownerCt;
 358             if (me.destroyMenu !== false) {
 359                 me.menu.destroy();
 360             }
 361         }
 362         me.callParent(arguments);
 363     },
 364
 365     onRender: function(ct, pos) {
 366         var me = this,
 367             prefix = '.' + Ext.baseCSSPrefix;
 368
 369         Ext.applyIf(me.renderData, {
 370             href: me.href || '#',
 371             hrefTarget: me.hrefTarget,
 372             icon: me.icon || Ext.BLANK_IMAGE_URL,
 373             iconCls: me.iconCls,
 374             menu: Ext.isDefined(me.menu),
 375             plain: me.plain,
 376             text: me.text
 377         });
 378
 379         Ext.applyIf(me.renderSelectors, {
 380             itemEl: prefix + 'menu-item-link',
 381             iconEl: prefix + 'menu-item-icon',
 382             textEl: prefix + 'menu-item-text',
 383             arrowEl: prefix + 'menu-item-arrow'
 384         });
 385
 386         me.callParent(arguments);
 387     },
 388
 389 <span id='Ext-menu-Item-method-setHandler'>    /**
 390 </span>     * Sets the {@link #click} handler of this item
 391      * @param {Function} fn The handler function
 392      * @param {Object} scope (optional) The scope of the handler function
 393      */
 394     setHandler: function(fn, scope) {
 395         this.handler = fn || null;
 396         this.scope = scope;
 397     },
 398
 399 <span id='Ext-menu-Item-method-setIconCls'>    /**
 400 </span>     * Sets the {@link #iconCls} of this item
 401      * @param {String} iconCls The CSS class to set to {@link #iconCls}
 402      */
 403     setIconCls: function(iconCls) {
 404         var me = this;
 405
 406         if (me.iconEl) {
 407             if (me.iconCls) {
 408                 me.iconEl.removeCls(me.iconCls);
 409             }
 410
 411             if (iconCls) {
 412                 me.iconEl.addCls(iconCls);
 413             }
 414         }
 415
 416         me.iconCls = iconCls;
 417     },
 418
 419 <span id='Ext-menu-Item-method-setText'>    /**
 420 </span>     * Sets the {@link #text} of this item
 421      * @param {String} text The {@link #text}
 422      */
 423     setText: function(text) {
 424         var me = this,
 425             el = me.textEl || me.el,
 426             newWidth;
 427
 428         if (text &amp;&amp; el) {
 429             el.update(text);
 430
 431             if (me.textEl) {
 432                 // Resize the menu to fit the text
 433                 newWidth = me.textEl.getWidth() + me.iconEl.getWidth() + 25 + (me.arrowEl ? me.arrowEl.getWidth() : 0);
 434                 if (newWidth &gt; me.itemEl.getWidth()) {
 435                     me.parentMenu.setWidth(newWidth);
 436                 }
 437             }
 438         } else if (el) {
 439             el.update('');
 440         }
 441
 442         me.text = text;
 443     }
 444 });
 445 </pre>
 446 </body>
 447 </html>