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