X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/source/Item.html diff --git a/docs/source/Item.html b/docs/source/Item.html index 3625bc3a..7c3dd769 100644 --- a/docs/source/Item.html +++ b/docs/source/Item.html @@ -1,428 +1,36 @@ -Sencha Documentation Project
/**
- * @class Ext.menu.Item
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
+ * @class Ext.toolbar.Item
  * @extends Ext.Component
-
- * 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
+ * The base class that other non-interacting Toolbar Item classes should extend in order to
+ * get some basic common toolbar item functionality.
  */
-Ext.define('Ext.menu.Item', {
+Ext.define('Ext.toolbar.Item', {
     extend: 'Ext.Component',
-    alias: 'widget.menuitem',
-    alternateClassName: 'Ext.menu.TextItem',
-    
-    /**
-     * @property {Boolean} activated
-     * Whether or not this item is currently activated
-     */
-
-    /**
-     * @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}
-     * 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.
-     */
-    
-    /**
-     * @cfg {String} menuAlign
-     * The default {@link Ext.core.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>',
-                '<tpl if="menu">',
-                    '<img src="' + Ext.BLANK_IMAGE_URL + '" 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();
-            me.activated = true;
-            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();
-            me.hideMenu();
-            me.activated = false;
-            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;
-            me.menu.parentMenu = me.menu.ownerCt = me.parentMenu;
-            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) {
-                me.deferExpandMenu();
-            } else {
-                me.expandMenuTimer = Ext.defer(me.deferExpandMenu, Ext.isNumber(delay) ? delay : me.menuExpandDelay, me);
-            }
-        }
-    },
-    
-    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 || [];   
-    },
-    
-    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
-             * Fires when this item is activated
-             * @param {Ext.menu.Item} item The activated item
-             */
-            'activate',
-            
-            /**
-             * @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',
-            
-            /**
-             * @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);
-        }
-        
-        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;
-            delete me.menu.ownerCt;
-            if (me.destroyMenu !== false) {
-                me.menu.destroy();
-            }
-        }
-        me.callParent(arguments);
-    },
-    
-    onRender: function(ct, pos) {
-        var me = this,
-            prefix = '.' + Ext.baseCSSPrefix;
-        
-        Ext.applyIf(me.renderData, {
-            href: me.href || '#',
-            hrefTarget: me.hrefTarget,
-            icon: me.icon || Ext.BLANK_IMAGE_URL,
-            iconCls: me.iconCls,
-            menu: Ext.isDefined(me.menu),
-            plain: me.plain,
-            text: me.text
-        });
-        
-        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.callParent(arguments);
-    },
-    
-    /**
-     * 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;
-    },
-    
-    /**
-     * 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('');
-        }
-        
-        me.text = text;
-    }
-});
-
\ No newline at end of file + alias: 'widget.tbitem', + alternateClassName: 'Ext.Toolbar.Item', + enable:Ext.emptyFn, + disable:Ext.emptyFn, + focus:Ext.emptyFn + /** + * @cfg {String} overflowText Text to be used for the menu if the item is overflowed. + */ +});
+ +