docs/source/Item.html

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