/hippo/src/main/webapp/ext/src/widgets/menu/Item.js

  1/*!
  2 * Ext JS Library 3.0.0
  3 * Copyright(c) 2006-2009 Ext JS, LLC
  4 * licensing@extjs.com
  5 * http://www.extjs.com/license
  6 */
  7/**
  8 * @class Ext.menu.Item
  9 * @extends Ext.menu.BaseItem
 10 * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
 11 * display items.  Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
 12 * activation and click handling.
 13 * @constructor
 14 * Creates a new Item
 15 * @param {Object} config Configuration options
 16 * @xtype menuitem
 17 */
 18Ext.menu.Item = function(config){
 19    Ext.menu.Item.superclass.constructor.call(this, config);
 20    if(this.menu){
 21        this.menu = Ext.menu.MenuMgr.get(this.menu);
 22    }
 23};
 24Ext.extend(Ext.menu.Item, Ext.menu.BaseItem, {
 25    /**
 26     * @property menu
 27     * @type Ext.menu.Menu
 28     * The submenu associated with this Item if one was configured.
 29     */
 30    /**
 31     * @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
 32     * {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
 33     */
 34    /**
 35     * @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL).  If
 36     * icon is specified {@link #iconCls} should not be.
 37     */
 38    /**
 39     * @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
 40     * this item (defaults to '').  If iconCls is specified {@link #icon} should not be.
 41     */
 42    /**
 43     * @cfg {String} text The text to display in this item (defaults to '').
 44     */
 45    /**
 46     * @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
 47     */
 48    /**
 49     * @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
 50     */
 51    /**
 52     * @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
 53     */
 54    itemCls : 'x-menu-item',
 55    /**
 56     * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
 57     */
 58    canActivate : true,
 59    /**
 60     * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
 61     */
 62    showDelay: 200,
 63    // doc'd in BaseItem
 64    hideDelay: 200,
 65
 66    // private
 67    ctype: 'Ext.menu.Item',
 68
 69    // private
 70    onRender : function(container, position){
 71        if (!this.itemTpl) {
 72            this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
 73                '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
 74                    '<tpl if="hrefTarget">',
 75                        ' target="{hrefTarget}"',
 76                    '</tpl>',
 77                 '>',
 78                     '<img src="{icon}" class="x-menu-item-icon {iconCls}"/>',
 79                     '<span class="x-menu-item-text">{text}</span>',
 80                 '</a>'
 81             );
 82        }
 83        var a = this.getTemplateArgs();
 84        this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
 85        this.iconEl = this.el.child('img.x-menu-item-icon');
 86        this.textEl = this.el.child('.x-menu-item-text');
 87        Ext.menu.Item.superclass.onRender.call(this, container, position);
 88    },
 89
 90    getTemplateArgs: function() {
 91        return {
 92            id: this.id,
 93            cls: this.itemCls + (this.menu ?  ' x-menu-item-arrow' : '') + (this.cls ?  ' ' + this.cls : ''),
 94            href: this.href || '#',
 95            hrefTarget: this.hrefTarget,
 96            icon: this.icon || Ext.BLANK_IMAGE_URL,
 97            iconCls: this.iconCls || '',
 98            text: this.itemText||this.text||'&#160;'
 99        };
100    },
101
102    /**
103     * Sets the text to display in this menu item
104     * @param {String} text The text to display
105     */
106    setText : function(text){
107        this.text = text||'&#160;';
108        if(this.rendered){
109            this.textEl.update(this.text);
110            this.parentMenu.layout.doAutoSize();
111        }
112    },
113
114    /**
115     * Sets the CSS class to apply to the item's icon element
116     * @param {String} cls The CSS class to apply
117     */
118    setIconClass : function(cls){
119        var oldCls = this.iconCls;
120        this.iconCls = cls;
121        if(this.rendered){
122            this.iconEl.replaceClass(oldCls, this.iconCls);
123        }
124    },
125    
126    //private
127    beforeDestroy: function(){
128        if (this.menu){
129            this.menu.destroy();
130        }
131        Ext.menu.Item.superclass.beforeDestroy.call(this);
132    },
133
134    // private
135    handleClick : function(e){
136        if(!this.href){ // if no link defined, stop the event automatically
137            e.stopEvent();
138        }
139        Ext.menu.Item.superclass.handleClick.apply(this, arguments);
140    },
141
142    // private
143    activate : function(autoExpand){
144        if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
145            this.focus();
146            if(autoExpand){
147                this.expandMenu();
148            }
149        }
150        return true;
151    },
152
153    // private
154    shouldDeactivate : function(e){
155        if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
156            if(this.menu && this.menu.isVisible()){
157                return !this.menu.getEl().getRegion().contains(e.getPoint());
158            }
159            return true;
160        }
161        return false;
162    },
163
164    // private
165    deactivate : function(){
166        Ext.menu.Item.superclass.deactivate.apply(this, arguments);
167        this.hideMenu();
168    },
169
170    // private
171    expandMenu : function(autoActivate){
172        if(!this.disabled && this.menu){
173            clearTimeout(this.hideTimer);
174            delete this.hideTimer;
175            if(!this.menu.isVisible() && !this.showTimer){
176                this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
177            }else if (this.menu.isVisible() && autoActivate){
178                this.menu.tryActivate(0, 1);
179            }
180        }
181    },
182
183    // private
184    deferExpand : function(autoActivate){
185        delete this.showTimer;
186        this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
187        if(autoActivate){
188            this.menu.tryActivate(0, 1);
189        }
190    },
191
192    // private
193    hideMenu : function(){
194        clearTimeout(this.showTimer);
195        delete this.showTimer;
196        if(!this.hideTimer && this.menu && this.menu.isVisible()){
197            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
198        }
199    },
200
201    // private
202    deferHide : function(){
203        delete this.hideTimer;
204        if(this.menu.over){
205            this.parentMenu.setActiveItem(this, false);
206        }else{
207            this.menu.hide();
208        }
209    }
210});
211Ext.reg('menuitem', Ext.menu.Item);