3 <title>The source code</title>
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 <body onload="prettyPrint();">
8 <pre class="prettyprint lang-js">/*!
10 * Copyright(c) 2006-2009 Ext JS, LLC
12 * http://www.extjs.com/license
14 <div id="cls-Ext.menu.BaseItem"></div>/**
15 * @class Ext.menu.BaseItem
16 * @extends Ext.Component
17 * The base class for all items that render into menus. BaseItem provides default rendering, activated state
18 * management and base configuration options shared by all menu components.
20 * Creates a new BaseItem
21 * @param {Object} config Configuration options
24 Ext.menu.BaseItem = function(config){
25 Ext.menu.BaseItem.superclass.constructor.call(this, config);
28 <div id="event-Ext.menu.BaseItem-click"></div>/**
30 * Fires when this item is clicked
31 * @param {Ext.menu.BaseItem} this
32 * @param {Ext.EventObject} e
35 <div id="event-Ext.menu.BaseItem-activate"></div>/**
37 * Fires when this item is activated
38 * @param {Ext.menu.BaseItem} this
41 <div id="event-Ext.menu.BaseItem-deactivate"></div>/**
43 * Fires when this item is deactivated
44 * @param {Ext.menu.BaseItem} this
50 this.on("click", this.handler, this.scope);
54 Ext.extend(Ext.menu.BaseItem, Ext.Component, {
55 <div id="prop-Ext.menu.BaseItem-parentMenu"></div>/**
56 * @property parentMenu
58 * The parent Menu of this Item.
60 <div id="cfg-Ext.menu.BaseItem-handler"></div>/**
61 * @cfg {Function} handler
62 * A function that will handle the click event of this menu item (optional).
63 * The handler is passed the following parameters:<div class="mdetail-params"><ul>
64 * <li><code>b</code> : Item<div class="sub-desc">This menu Item.</div></li>
65 * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
68 <div id="cfg-Ext.menu.BaseItem-scope"></div>/**
70 * The scope (<tt><b>this</b></tt> reference) in which the handler function will be called.
72 <div id="cfg-Ext.menu.BaseItem-canActivate"></div>/**
73 * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
76 <div id="cfg-Ext.menu.BaseItem-activeClass"></div>/**
77 * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
79 activeClass : "x-menu-item-active",
80 <div id="cfg-Ext.menu.BaseItem-hideOnClick"></div>/**
81 * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
84 <div id="cfg-Ext.menu.BaseItem-clickHideDelay"></div>/**
85 * @cfg {Number} clickHideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
90 ctype : "Ext.menu.BaseItem",
93 actionMode : "container",
96 onRender : function(container, position){
97 Ext.menu.BaseItem.superclass.onRender.apply(this, arguments);
98 if(this.ownerCt && this.ownerCt instanceof Ext.menu.Menu){
99 this.parentMenu = this.ownerCt;
101 this.container.addClass('x-menu-list-item');
102 this.mon(this.el, 'click', this.onClick, this);
103 this.mon(this.el, 'mouseenter', this.activate, this);
104 this.mon(this.el, 'mouseleave', this.deactivate, this);
108 <div id="method-Ext.menu.BaseItem-setHandler"></div>/**
109 * Sets the function that will handle click events for this item (equivalent to passing in the {@link #handler}
110 * config property). If an existing handler is already registered, it will be unregistered for you.
111 * @param {Function} handler The function that should be called on click
112 * @param {Object} scope The scope that should be passed to the handler
114 setHandler : function(handler, scope){
116 this.un("click", this.handler, this.scope);
118 this.on("click", this.handler = handler, this.scope = scope);
122 onClick : function(e){
123 if(!this.disabled && this.fireEvent("click", this, e) !== false
124 && (this.parentMenu && this.parentMenu.fireEvent("itemclick", this, e) !== false)){
132 activate : function(){
136 var li = this.container;
137 li.addClass(this.activeClass);
138 this.region = li.getRegion().adjust(2, 2, -2, -2);
139 this.fireEvent("activate", this);
144 deactivate : function(){
145 this.container.removeClass(this.activeClass);
146 this.fireEvent("deactivate", this);
150 shouldDeactivate : function(e){
151 return !this.region || !this.region.contains(e.getPoint());
155 handleClick : function(e){
156 var pm = this.parentMenu;
157 if(this.hideOnClick){
159 pm.hide.defer(this.clickHideDelay, pm, [true]);
161 pm.deactivateActive();
166 // private. Do nothing
167 expandMenu : Ext.emptyFn,
169 // private. Do nothing
170 hideMenu : Ext.emptyFn
172 Ext.reg('menubaseitem', Ext.menu.BaseItem);</pre>