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
16 * The base class for all items that render into menus. BaseItem provides default rendering, activated state
17 * management and base configuration options shared by all menu components.
19 * Creates a new BaseItem
20 * @param {Object} config Configuration options
22 </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">){
23 </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">);
25 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
26 </span><span class="jsdoc-comment">/**
28 * Fires when this item is clicked
29 * @param {Roo.menu.BaseItem} this
30 * @param {Roo.EventObject} e
32 </span><span class="jsdoc-var">click</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
33 </span><span class="jsdoc-comment">/**
35 * Fires when this item is activated
36 * @param {Roo.menu.BaseItem} this
38 </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
39 </span><span class="jsdoc-comment">/**
41 * Fires when this item is deactivated
42 * @param {Roo.menu.BaseItem} this
44 </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
45 </span><span class="jsdoc-syntax">});
47 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
48 </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">);
52 </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">, {
53 </span><span class="jsdoc-comment">/**
54 * @cfg {Function} handler
55 * A function that will handle the click event of this menu item (defaults to undefined)
58 * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to false)
60 </span><span class="jsdoc-var">canActivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
62 </span><span class="jsdoc-comment">/**
63 * @cfg {Boolean} hidden True to prevent creation of this menu item (defaults to false)
65 </span><span class="jsdoc-var">hidden</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-comment">/**
68 * @cfg {String} activeClass The CSS class to use when the item becomes activated (defaults to "x-menu-item-active")
70 </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">,
71 </span><span class="jsdoc-comment">/**
72 * @cfg {Boolean} hideOnClick True to hide the containing menu after this item is clicked (defaults to true)
74 </span><span class="jsdoc-var">hideOnClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
75 </span><span class="jsdoc-comment">/**
76 * @cfg {Number} hideDelay Length of time in milliseconds to wait before hiding after a click (defaults to 100)
78 </span><span class="jsdoc-var">hideDelay </span><span class="jsdoc-syntax">: 100,
80 </span><span class="jsdoc-comment">// private
81 </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Roo.menu.BaseItem"</span><span class="jsdoc-syntax">,
83 </span><span class="jsdoc-comment">// private
84 </span><span class="jsdoc-var">actionMode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"container"</span><span class="jsdoc-syntax">,
86 </span><span class="jsdoc-comment">// private
87 </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">){
88 </span><span class="jsdoc-var">this.parentMenu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">parentMenu</span><span class="jsdoc-syntax">;
89 </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">);
90 </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">;
93 </span><span class="jsdoc-comment">// private
94 </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">){
95 </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">);
96 </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">);
99 </span><span class="jsdoc-comment">// private
100 </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">){
101 </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
102 </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">){
103 </span><span class="jsdoc-var">this.handleClick</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
104 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
105 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
109 </span><span class="jsdoc-comment">// private
110 </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
111 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
112 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
114 </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">;
115 </span><span class="jsdoc-var">li.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.activeClass</span><span class="jsdoc-syntax">);
116 </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);
117 </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">);
118 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
121 </span><span class="jsdoc-comment">// private
122 </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
123 </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">);
124 </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">);
127 </span><span class="jsdoc-comment">// private
128 </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">){
129 </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">());
132 </span><span class="jsdoc-comment">// private
133 </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">){
134 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideOnClick</span><span class="jsdoc-syntax">){
135 </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">]);
139 </span><span class="jsdoc-comment">// private
140 </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">){
141 </span><span class="jsdoc-comment">// do nothing
142 </span><span class="jsdoc-syntax">},
144 </span><span class="jsdoc-comment">// private
145 </span><span class="jsdoc-var">hideMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
146 </span><span class="jsdoc-comment">// do nothing
147 </span><span class="jsdoc-syntax">}
148 });</span></code></body></html>