1 <html><head><title>Roo/menu/BaseItem.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.menu.BaseItem
15 * @extends Roo.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
23 </span><span class="jsdoc-var">Roo.menu.BaseItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
24 </span><span class="jsdoc-var">Roo.menu.BaseItem.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
26 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
27 </span><span class="jsdoc-comment">/**
29 * Fires when this item is clicked
30 * @param {Roo.menu.BaseItem} this
31 * @param {Roo.EventObject} e
33 </span><span class="jsdoc-var">click</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
34 </span><span class="jsdoc-comment">/**
36 * Fires when this item is activated
37 * @param {Roo.menu.BaseItem} this
39 </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
40 </span><span class="jsdoc-comment">/**
42 * Fires when this item is deactivated
43 * @param {Roo.menu.BaseItem} this
45 </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
46 </span><span class="jsdoc-syntax">});
48 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
49 </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.scope</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
53 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.BaseItem</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
54 </span><span class="jsdoc-comment">/**
55 * @cfg {Function} handler
56 * A function that will handle the click event of this menu item (defaults to undefined)
59 * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
61 </span><span class="jsdoc-var">canActivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
63 </span><span class="jsdoc-comment">/**
64 * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
66 </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
68 </span><span class="jsdoc-comment">/**
69 * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
71 </span><span class="jsdoc-var">activeClass </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-menu-item-active"</span><span class="jsdoc-syntax">,
72 </span><span class="jsdoc-comment">/**
73 * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
75 </span><span class="jsdoc-var">hideOnClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
76 </span><span class="jsdoc-comment">/**
77 * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
79 </span><span class="jsdoc-var">hideDelay </span><span class="jsdoc-syntax">: 100,
81 </span><span class="jsdoc-comment">// private
82 </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Roo.menu.BaseItem"</span><span class="jsdoc-syntax">,
84 </span><span class="jsdoc-comment">// private
85 </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"container"</span><span class="jsdoc-syntax">,
87 </span><span class="jsdoc-comment">// private
88 </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">){
89 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
90 </span><span class="jsdoc-var">Roo.menu.BaseItem.superclass.render.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
91 </span><span class="jsdoc-var">this.container.menuItemId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">;
94 </span><span class="jsdoc-comment">// private
95 </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
96 </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
97 </span><span class="jsdoc-var">container.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom</span><span class="jsdoc-syntax">);
100 </span><span class="jsdoc-comment">// private
101 </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
102 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false
103 </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.parentMenu.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"itemclick"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
104 </span><span class="jsdoc-var">this.handleClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
105 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
106 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
110 </span><span class="jsdoc-comment">// private
111 </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
112 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
113 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
115 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">;
116 </span><span class="jsdoc-var">li.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeClass</span><span class="jsdoc-syntax">);
117 </span><span class="jsdoc-var">this.region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">li.getRegion</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.adjust</span><span class="jsdoc-syntax">(2, 2, -2, -2);
118 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"activate"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
119 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
122 </span><span class="jsdoc-comment">// private
123 </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
124 </span><span class="jsdoc-var">this.container.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeClass</span><span class="jsdoc-syntax">);
125 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"deactivate"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
128 </span><span class="jsdoc-comment">// private
129 </span><span class="jsdoc-var">shouldDeactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
130 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">this.region </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.region.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getPoint</span><span class="jsdoc-syntax">());
133 </span><span class="jsdoc-comment">// private
134 </span><span class="jsdoc-var">handleClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
135 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideOnClick</span><span class="jsdoc-syntax">){
136 </span><span class="jsdoc-var">this.parentMenu.hide.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideDelay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.parentMenu</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">]);
140 </span><span class="jsdoc-comment">// private
141 </span><span class="jsdoc-var">expandMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">){
142 </span><span class="jsdoc-comment">// do nothing
143 </span><span class="jsdoc-syntax">},
145 </span><span class="jsdoc-comment">// private
146 </span><span class="jsdoc-var">hideMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
147 </span><span class="jsdoc-comment">// do nothing
148 </span><span class="jsdoc-syntax">}
149 });</span></code></body></html>