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