Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Item.html
index d58c5a4..1a190d9 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <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>
+  <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();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.menu.Item"></div>/**
- * @class Ext.menu.Item
- * @extends Ext.menu.BaseItem
- * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
- * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
- * activation and click handling.
- * @constructor
- * Creates a new Item
- * @param {Object} config Configuration options
- * @xtype menuitem
+<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.menu.Item = Ext.extend(Ext.menu.BaseItem, {
-    <div id="prop-Ext.menu.Item-menu"></div>/**
-     * @property menu
-     * @type Ext.menu.Menu
-     * The submenu associated with this Item if one was configured.
+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
      */
-    <div id="cfg-Ext.menu.Item-menu"></div>/**
-     * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
-     * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
-     */
-    <div id="cfg-Ext.menu.Item-icon"></div>/**
-     * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
-     * icon is specified {@link #iconCls} should not be.
+    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
      */
-    <div id="cfg-Ext.menu.Item-iconCls"></div>/**
-     * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
-     * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
+
+<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
      */
-    <div id="cfg-Ext.menu.Item-text"></div>/**
-     * @cfg {String} text The text to display in this item (defaults to '').
+
+    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.
      */
-    <div id="cfg-Ext.menu.Item-href"></div>/**
-     * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
+
+<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
      */
-    <div id="cfg-Ext.menu.Item-hrefTarget"></div>/**
-     * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
+    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
      */
-    <div id="cfg-Ext.menu.Item-itemCls"></div>/**
-     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
+    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
      */
-    itemCls : 'x-menu-item',
-    <div id="cfg-Ext.menu.Item-canActivate"></div>/**
-     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
+    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
      */
-    canActivate : true,
-    <div id="cfg-Ext.menu.Item-showDelay"></div>/**
-     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
+
+    renderTpl: [
+        '&lt;tpl if=&quot;plain&quot;&gt;',
+            '{text}',
+        '&lt;/tpl&gt;',
+        '&lt;tpl if=&quot;!plain&quot;&gt;',
+            '&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;',
+                '&lt;img id=&quot;{id}-iconEl&quot; src=&quot;{icon}&quot; class=&quot;' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}&quot; /&gt;',
+                '&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;',
+                '&lt;tpl if=&quot;menu&quot;&gt;',
+                    '&lt;img id=&quot;{id}-arrowEl&quot; src=&quot;{blank}&quot; class=&quot;' + Ext.baseCSSPrefix + 'menu-item-arrow&quot; /&gt;',
+                '&lt;/tpl&gt;',
+            '&lt;/a&gt;',
+        '&lt;/tpl&gt;'
+    ],
+
+    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
      */
-    showDelay: 200,
-    // doc'd in BaseItem
-    hideDelay: 200,
 
-    // private
-    ctype: 'Ext.menu.Item',
+    activate: function() {
+        var me = this;
 
-    initComponent : function(){
-        Ext.menu.Item.superclass.initComponent.call(this);
-        if(this.menu){
-            this.menu = Ext.menu.MenuMgr.get(this.menu);
-            this.menu.ownerCt = this;
+        if (!me.activated &amp;&amp; me.canActivate &amp;&amp; me.rendered &amp;&amp; !me.isDisabled() &amp;&amp; me.isVisible()) {
+            me.el.addCls(me.activeCls);
+            me.focus();
+            me.activated = true;
+            me.fireEvent('activate', me);
         }
     },
 
-    // private
-    onRender : function(container, position){
-        if (!this.itemTpl) {
-            this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
-                '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
-                    '<tpl if="hrefTarget">',
-                        ' target="{hrefTarget}"',
-                    '</tpl>',
-                 '>',
-                     '<img src="{icon}" class="x-menu-item-icon {iconCls}"/>',
-                     '<span class="x-menu-item-text">{text}</span>',
-                 '</a>'
-             );
-        }
-        var a = this.getTemplateArgs();
-        this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
-        this.iconEl = this.el.child('img.x-menu-item-icon');
-        this.textEl = this.el.child('.x-menu-item-text');
-        if(!this.href) { // if no link defined, prevent the default anchor event
-            this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
-        }
-        Ext.menu.Item.superclass.onRender.call(this, container, position);
+    blur: function() {
+        this.$focused = false;
+        this.callParent(arguments);
     },
 
-    getTemplateArgs: function() {
-        return {
-            id: this.id,
-            cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
-            href: this.href || '#',
-            hrefTarget: this.hrefTarget,
-            icon: this.icon || Ext.BLANK_IMAGE_URL,
-            iconCls: this.iconCls || '',
-            text: this.itemText||this.text||'&#160;'
-        };
+    deactivate: function() {
+        var me = this;
+
+        if (me.activated) {
+            me.el.removeCls(me.activeCls);
+            me.blur();
+            me.hideMenu();
+            me.activated = false;
+            me.fireEvent('deactivate', me);
+        }
     },
 
-    <div id="method-Ext.menu.Item-setText"></div>/**
-     * Sets the text to display in this menu item
-     * @param {String} text The text to display
-     */
-    setText : function(text){
-        this.text = text||'&#160;';
-        if(this.rendered){
-            this.textEl.update(this.text);
-            this.parentMenu.layout.doAutoSize();
+    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);
         }
     },
 
-    <div id="method-Ext.menu.Item-setIconClass"></div>/**
-     * Sets the CSS class to apply to the item's icon element
-     * @param {String} cls The CSS class to apply
-     */
-    setIconClass : function(cls){
-        var oldCls = this.iconCls;
-        this.iconCls = cls;
-        if(this.rendered){
-            this.iconEl.replaceClass(oldCls, this.iconCls);
+    deferHideMenu: function() {
+        if (this.menu.isVisible()) {
+            this.menu.hide();
         }
     },
 
-    //private
-    beforeDestroy: function(){
-        if (this.menu){
-            delete this.menu.ownerCt;
-            this.menu.destroy();
+    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);
+            }
         }
-        Ext.menu.Item.superclass.beforeDestroy.call(this);
     },
 
-    // private
-    handleClick : function(e){
-        if(!this.href){ // if no link defined, stop the event automatically
-            e.stopEvent();
+    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);
         }
-        Ext.menu.Item.superclass.handleClick.apply(this, arguments);
+        return items || [];
     },
 
-    // private
-    activate : function(autoExpand){
-        if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
-            this.focus();
-            if(autoExpand){
-                this.expandMenu();
-            }
+    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);
         }
-        return true;
     },
 
-    // private
-    shouldDeactivate : function(e){
-        if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
-            if(this.menu && this.menu.isVisible()){
-                return !this.menu.getEl().getRegion().contains(e.getPoint());
-            }
-            return true;
+    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);
         }
-        return false;
+
+        me.cls = cls.join(' ');
+
+        if (me.menu) {
+            me.menu = Ext.menu.Manager.get(me.menu);
+        }
+
+        me.callParent(arguments);
     },
 
-    // private
-    deactivate : function(){
-        Ext.menu.Item.superclass.deactivate.apply(this, arguments);
-        this.hideMenu();
+    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();
+        }
     },
 
-    // private
-    expandMenu : function(autoActivate){
-        if(!this.disabled && this.menu){
-            clearTimeout(this.hideTimer);
-            delete this.hideTimer;
-            if(!this.menu.isVisible() && !this.showTimer){
-                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
-            }else if (this.menu.isVisible() && autoActivate){
-                this.menu.tryActivate(0, 1);
+    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);
     },
 
-    // private
-    deferExpand : function(autoActivate){
-        delete this.showTimer;
-        this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
-        if(autoActivate){
-            this.menu.tryActivate(0, 1);
-        }
+    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;
     },
 
-    // private
-    hideMenu : function(){
-        clearTimeout(this.showTimer);
-        delete this.showTimer;
-        if(!this.hideTimer && this.menu && this.menu.isVisible()){
-            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
+<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;
     },
 
-    // private
-    deferHide : function(){
-        delete this.hideTimer;
-        if(this.menu.over){
-            this.parentMenu.setActiveItem(this, false);
-        }else{
-            this.menu.hide();
+<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();
         }
     }
 });
-Ext.reg('menuitem', Ext.menu.Item);</pre>    
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>