X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..HEAD:/docs/source/Item.html diff --git a/docs/source/Item.html b/docs/source/Item.html index a5c57aa5..1a190d9a 100644 --- a/docs/source/Item.html +++ b/docs/source/Item.html @@ -3,8 +3,8 @@ The source code - - + + @@ -15,120 +15,113 @@ -
/**
- * @class Ext.menu.Item
- * @extends Ext.Component
-
- * A base class for all menu items that require menu-related functionality such as click handling,
+  
/**
+ * A base class for all menu items that require menu-related functionality such as click handling,
  * sub-menus, icons, etc.
- * {@img Ext.menu.Menu/Ext.menu.Menu.png Ext.menu.Menu component}
-__Example Usage:__
-    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        
-		}]
-	}); 
-
- * @xtype menuitem
- * @markdown
- * @constructor
- * @param {Object} config The config object
+ *
+ *     @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.define('Ext.menu.Item', {
     extend: 'Ext.Component',
     alias: 'widget.menuitem',
     alternateClassName: 'Ext.menu.TextItem',
-    
+
     /**
      * @property {Boolean} activated
      * Whether or not this item is currently activated
      */
 
+    /**
+     * @property {Ext.menu.Menu} parentMenu
+     * The parent Menu of this item.
+     */
+
     /**
      * @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'`.
-     * @markdown
      */
     activeCls: Ext.baseCSSPrefix + 'menu-item-active',
-    
+
     /**
      * @cfg {String} ariaRole @hide
      */
     ariaRole: 'menuitem',
-    
+
     /**
      * @cfg {Boolean} canActivate
      * Whether or not this menu item can be activated when focused/mouseovered. Defaults to `true`.
-     * @markdown
      */
     canActivate: true,
-    
+
     /**
      * @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`.
-     * @markdown
      */
     clickHideDelay: 1,
-    
+
     /**
      * @cfg {Boolean} destroyMenu
      * Whether or not to destroy any associated sub-menu when this item is destroyed. Defaults to `true`.
      */
     destroyMenu: true,
-    
+
     /**
      * @cfg {String} disabledCls
      * The CSS class added to the menu item when the item is disabled.
      * Defaults to `Ext.baseCSSPrefix + 'menu-item-disabled'`.
-     * @markdown
      */
     disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled',
-    
+
     /**
      * @cfg {String} href
      * The href attribute to use for the underlying anchor link. Defaults to `#`.
      * @markdown
      */
-     
+
      /**
       * @cfg {String} hrefTarget
       * The target attribute to use for the underlying anchor link. Defaults to `undefined`.
       * @markdown
       */
-    
+
     /**
      * @cfg {Boolean} hideOnClick
      * Whether to not to hide the owning menu when this item is clicked. Defaults to `true`.
      * @markdown
      */
     hideOnClick: true,
-    
+
     /**
      * @cfg {String} icon
      * The path to an icon to display in this item. Defaults to `Ext.BLANK_IMAGE_URL`.
      * @markdown
      */
-     
+
     /**
      * @cfg {String} iconCls
      * A CSS class that specifies a `background-image` to use as the icon for this item. Defaults to `undefined`.
      * @markdown
      */
-    
+
     isMenuItem: true,
-    
+
     /**
      * @cfg {Mixed} menu
      * Either an instance of {@link Ext.menu.Menu} or a config object for an {@link Ext.menu.Menu}
@@ -136,61 +129,61 @@ Ext.define('Ext.menu.Item', {
      * @markdown
      * @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured.
      */
-    
+
     /**
      * @cfg {String} menuAlign
-     * The default {@link Ext.core.Element#getAlignToXY Ext.Element.getAlignToXY} anchor position value for this
+     * 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
      */
     menuAlign: 'tl-tr?',
-    
+
     /**
      * @cfg {Number} menuExpandDelay
      * The delay in milliseconds before this item's sub-menu expands after this item is moused over. Defaults to `200`.
      * @markdown
      */
     menuExpandDelay: 200,
-    
+
     /**
      * @cfg {Number} menuHideDelay
      * The delay in milliseconds before this item's sub-menu hides after this item is moused out. Defaults to `200`.
      * @markdown
      */
     menuHideDelay: 200,
-    
+
     /**
      * @cfg {Boolean} plain
      * Whether or not this item is plain text/html with no icon or visual activation. Defaults to `false`.
      * @markdown
      */
-    
+
     renderTpl: [
         '<tpl if="plain">',
             '{text}',
         '</tpl>',
         '<tpl if="!plain">',
-            '<a class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
-                '<img src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
-                '<span class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
+            '<a id="{id}-itemEl" class="' + Ext.baseCSSPrefix + 'menu-item-link" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on">',
+                '<img id="{id}-iconEl" src="{icon}" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}" />',
+                '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'menu-item-text" <tpl if="menu">style="margin-right: 17px;"</tpl> >{text}</span>',
                 '<tpl if="menu">',
-                    '<img src="' + Ext.BLANK_IMAGE_URL + '" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
+                    '<img id="{id}-arrowEl" src="{blank}" class="' + Ext.baseCSSPrefix + 'menu-item-arrow" />',
                 '</tpl>',
             '</a>',
         '</tpl>'
     ],
-    
+
     maskOnDisable: false,
-    
+
     /**
      * @cfg {String} text
      * The text/html to display in this item. Defaults to `undefined`.
      * @markdown
      */
-    
+
     activate: function() {
         var me = this;
-        
+
         if (!me.activated && me.canActivate && me.rendered && !me.isDisabled() && me.isVisible()) {
             me.el.addCls(me.activeCls);
             me.focus();
@@ -198,15 +191,15 @@ Ext.define('Ext.menu.Item', {
             me.fireEvent('activate', me);
         }
     },
-    
+
     blur: function() {
         this.$focused = false;
         this.callParent(arguments);
     },
-    
+
     deactivate: function() {
         var me = this;
-        
+
         if (me.activated) {
             me.el.removeCls(me.activeCls);
             me.blur();
@@ -215,10 +208,10 @@ Ext.define('Ext.menu.Item', {
             me.fireEvent('deactivate', me);
         }
     },
-    
+
     deferExpandMenu: function() {
         var me = this;
-        
+
         if (!me.menu.rendered || !me.menu.isVisible()) {
             me.parentMenu.activeChild = me.menu;
             me.menu.parentItem = me;
@@ -226,20 +219,20 @@ Ext.define('Ext.menu.Item', {
             me.menu.showBy(me, me.menuAlign);
         }
     },
-    
+
     deferHideMenu: function() {
         if (this.menu.isVisible()) {
             this.menu.hide();
         }
     },
-    
+
     deferHideParentMenus: function() {
         Ext.menu.Manager.hideAll();
     },
-    
+
     expandMenu: function(delay) {
         var me = this;
-        
+
         if (me.menu) {
             clearTimeout(me.hideMenuTimer);
             if (delay === 0) {
@@ -249,37 +242,37 @@ Ext.define('Ext.menu.Item', {
             }
         }
     },
-    
+
     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);
-        }   
-        return items || [];   
+        }
+        return items || [];
     },
-    
+
     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);
         }
     },
-    
+
     initComponent: function() {
         var me = this,
             prefix = Ext.baseCSSPrefix,
             cls = [prefix + 'menu-item'];
-        
+
         me.addEvents(
             /**
              * @event activate
@@ -287,7 +280,7 @@ Ext.define('Ext.menu.Item', {
              * @param {Ext.menu.Item} item The activated item
              */
             'activate',
-            
+
             /**
              * @event click
              * Fires when this item is clicked
@@ -295,7 +288,7 @@ Ext.define('Ext.menu.Item', {
              * @param {Ext.EventObject} e The underyling {@link Ext.EventObject}.
              */
             'click',
-            
+
             /**
              * @event deactivate
              * Fires when this tiem is deactivated
@@ -303,54 +296,54 @@ Ext.define('Ext.menu.Item', {
              */
             'deactivate'
         );
-        
+
         if (me.plain) {
             cls.push(prefix + 'menu-item-plain');
         }
-        
+
         if (me.cls) {
             cls.push(me.cls);
         }
-        
+
         me.cls = cls.join(' ');
-        
+
         if (me.menu) {
             me.menu = Ext.menu.Manager.get(me.menu);
         }
-        
+
         me.callParent(arguments);
     },
-    
+
     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();
         }
     },
-    
+
     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;
@@ -361,31 +354,27 @@ Ext.define('Ext.menu.Item', {
         }
         me.callParent(arguments);
     },
-    
+
     onRender: function(ct, pos) {
         var me = this,
-            prefix = '.' + Ext.baseCSSPrefix;
-        
+            blank = Ext.BLANK_IMAGE_URL;
+
         Ext.applyIf(me.renderData, {
             href: me.href || '#',
             hrefTarget: me.hrefTarget,
-            icon: me.icon || Ext.BLANK_IMAGE_URL,
-            iconCls: me.iconCls,
+            icon: me.icon || blank,
+            iconCls: me.iconCls + (me.checkChangeDisabled ? ' ' + me.disabledCls : ''),
             menu: Ext.isDefined(me.menu),
             plain: me.plain,
-            text: me.text
+            text: me.text,
+            blank: blank
         });
-        
-        Ext.applyIf(me.renderSelectors, {
-            itemEl: prefix + 'menu-item-link',
-            iconEl: prefix + 'menu-item-icon',
-            textEl: prefix + 'menu-item-text',
-            arrowEl: prefix + 'menu-item-arrow'
-        });
-        
+
+        me.addChildEls('itemEl', 'iconEl', 'textEl', 'arrowEl');
+
         me.callParent(arguments);
     },
-    
+
     /**
      * Sets the {@link #click} handler of this item
      * @param {Function} fn The handler function
@@ -395,51 +384,42 @@ Ext.define('Ext.menu.Item', {
         this.handler = fn || null;
         this.scope = scope;
     },
-    
+
     /**
      * 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;
     },
-    
+
     /**
      * Sets the {@link #text} of this item
      * @param {String} text The {@link #text}
      */
     setText: function(text) {
         var me = this,
-            el = me.textEl || me.el,
-            newWidth;
-        
-        if (text && el) {
-            el.update(text);
-                
-            if (me.textEl) {
-                // Resize the menu to fit the text
-                newWidth = me.textEl.getWidth() + me.iconEl.getWidth() + 25 + (me.arrowEl ? me.arrowEl.getWidth() : 0);
-                if (newWidth > me.itemEl.getWidth()) {
-                    me.parentMenu.setWidth(newWidth);
-                }
-            }
-        } else if (el) {
-            el.update('');
-        }
-        
+            el = me.textEl || me.el;
+
         me.text = text;
+
+        if (me.rendered) {
+            el.update(text || '');
+            // cannot just call doComponentLayout due to stretchmax
+            me.ownerCt.redoComponentLayout();
+        }
     }
 });