projects / roojs1 / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
major doc changes
[roojs1] / docs / src / Roo_menu_Item.js.html
1 <html><head><title>Roo/menu/Item.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">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11 /**
12  * @class Roo.menu.Item
13  * @extends Roo.menu.BaseItem
14  * A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
15  * display items.  Item extends the base functionality of {@link Roo.menu.BaseItem} by adding menu-specific
16  * activation and click handling.
17  * @constructor
18  * Creates a new Item
19  * @param {Object} config Configuration options
20  */
21 </span><span class="jsdoc-var">Roo.menu.Item </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">){
22     </span><span class="jsdoc-var">Roo.menu.Item.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">);
23     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
24         </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.menu.MenuMgr.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">);
25     }
26 };
27 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.menu.BaseItem</span><span class="jsdoc-syntax">, {
28     </span><span class="jsdoc-comment">/**
29      * @cfg {Roo.menu.Menu} menu
30      * A Sub menu
31      */
32     /**
33      * @cfg {String} text
34      * The text to show on the menu item.
35      */
36     </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
37      </span><span class="jsdoc-comment">/**
38      * @cfg {String} HTML to render in menu
39      * The text to show on the menu item (HTML version).
40      */
41     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
42     </span><span class="jsdoc-comment">/**
43      * @cfg {String} icon
44      * The path to an icon to display in this menu item (defaults to Roo.BLANK_IMAGE_URL)
45      */
46     </span><span class="jsdoc-var">icon</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">,
47     </span><span class="jsdoc-comment">/**
48      * @cfg {String} itemCls The default CSS class to use for menu items (defaults to &quot;x-menu-item&quot;)
49      */
50     </span><span class="jsdoc-var">itemCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-menu-item&quot;</span><span class="jsdoc-syntax">,
51     </span><span class="jsdoc-comment">/**
52      * @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
53      */
54     </span><span class="jsdoc-var">canActivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
55     </span><span class="jsdoc-comment">/**
56      * @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
57      */
58     </span><span class="jsdoc-var">showDelay</span><span class="jsdoc-syntax">: 200,
59     </span><span class="jsdoc-comment">// doc'd in BaseItem
60     </span><span class="jsdoc-var">hideDelay</span><span class="jsdoc-syntax">: 200,
61
62     </span><span class="jsdoc-comment">// private
63     </span><span class="jsdoc-var">ctype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Roo.menu.Item&quot;</span><span class="jsdoc-syntax">,
64
65     </span><span class="jsdoc-comment">// private
66     </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">){
67         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;a&quot;</span><span class="jsdoc-syntax">);
68         </span><span class="jsdoc-var">el.hideFocus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
69         </span><span class="jsdoc-var">el.unselectable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;on&quot;</span><span class="jsdoc-syntax">;
70         </span><span class="jsdoc-var">el.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;#&quot;</span><span class="jsdoc-syntax">;
71         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hrefTarget</span><span class="jsdoc-syntax">){
72             </span><span class="jsdoc-var">el.target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.hrefTarget</span><span class="jsdoc-syntax">;
73         }
74         </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.itemCls </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">?  </span><span class="jsdoc-string">&quot; x-menu-item-arrow&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">) + (</span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">?  </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
75
76         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.html.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.html  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">);
77
78         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(
79                 </span><span class="jsdoc-string">'&lt;img src=&quot;{0}&quot; class=&quot;x-menu-item-icon {1}&quot; /&gt;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">,
80                 </span><span class="jsdoc-var">this.icon </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.iconCls </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
81         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
82         </span><span class="jsdoc-var">Roo.menu.Item.superclass.onRender.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">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
83     },
84
85     </span><span class="jsdoc-comment">/**
86      * Sets the text to display in this menu item
87      * @param {String} text The text to display
88      * @param {Boolean} isHTML true to indicate text is pure html.
89      */
90     </span><span class="jsdoc-var">setText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">isHTML</span><span class="jsdoc-syntax">){
91         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isHTML</span><span class="jsdoc-syntax">) {
92             </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
93         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
94             </span><span class="jsdoc-var">this.text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
95             </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
96         }
97         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
98             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.html.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.html  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">);
99
100             </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(
101                 </span><span class="jsdoc-string">'&lt;img src=&quot;{0}&quot; class=&quot;x-menu-item-icon {2}&quot;&gt;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">,
102                 </span><span class="jsdoc-var">this.icon </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.BLANK_IMAGE_URL</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.iconCls </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">));
103             </span><span class="jsdoc-var">this.parentMenu.autoWidth</span><span class="jsdoc-syntax">();
104         }
105     },
106
107     </span><span class="jsdoc-comment">// private
108     </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">){
109         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// if no link defined, stop the event automatically
110             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
111         }
112         </span><span class="jsdoc-var">Roo.menu.Item.superclass.handleClick.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
113     },
114
115     </span><span class="jsdoc-comment">// private
116     </span><span class="jsdoc-var">activate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">){
117         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Item.superclass.activate.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">)){
118             </span><span class="jsdoc-var">this.focus</span><span class="jsdoc-syntax">();
119             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoExpand</span><span class="jsdoc-syntax">){
120                 </span><span class="jsdoc-var">this.expandMenu</span><span class="jsdoc-syntax">();
121             }
122         }
123         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
124     },
125
126     </span><span class="jsdoc-comment">// private
127     </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">){
128         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.menu.Item.superclass.shouldDeactivate.call</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">)){
129             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">()){
130                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">!</span><span class="jsdoc-var">this.menu.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getRegion</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.getPoint</span><span class="jsdoc-syntax">());
131             }
132             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
133         }
134         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
135     },
136
137     </span><span class="jsdoc-comment">// private
138     </span><span class="jsdoc-var">deactivate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
139         </span><span class="jsdoc-var">Roo.menu.Item.superclass.deactivate.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">);
140         </span><span class="jsdoc-var">this.hideMenu</span><span class="jsdoc-syntax">();
141     },
142
143     </span><span class="jsdoc-comment">// private
144     </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">){
145         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu</span><span class="jsdoc-syntax">){
146             </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideTimer</span><span class="jsdoc-syntax">);
147             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.hideTimer</span><span class="jsdoc-syntax">;
148             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">() &amp;&amp; !</span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">){
149                 </span><span class="jsdoc-var">this.showTimer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.deferExpand.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showDelay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">]);
150             }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">() &amp;&amp; </span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">){
151                 </span><span class="jsdoc-var">this.menu.tryActivate</span><span class="jsdoc-syntax">(0, 1);
152             }
153         }
154     },
155
156     </span><span class="jsdoc-comment">// private
157     </span><span class="jsdoc-var">deferExpand </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">){
158         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">;
159         </span><span class="jsdoc-var">this.menu.show</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.parentMenu.subMenuAlign </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;tl-tr?&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.parentMenu</span><span class="jsdoc-syntax">);
160         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">autoActivate</span><span class="jsdoc-syntax">){
161             </span><span class="jsdoc-var">this.menu.tryActivate</span><span class="jsdoc-syntax">(0, 1);
162         }
163     },
164
165     </span><span class="jsdoc-comment">// private
166     </span><span class="jsdoc-var">hideMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
167         </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">);
168         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.showTimer</span><span class="jsdoc-syntax">;
169         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hideTimer </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.menu.isVisible</span><span class="jsdoc-syntax">()){
170             </span><span class="jsdoc-var">this.hideTimer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.deferHide.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hideDelay</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
171         }
172     },
173
174     </span><span class="jsdoc-comment">// private
175     </span><span class="jsdoc-var">deferHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
176         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.hideTimer</span><span class="jsdoc-syntax">;
177         </span><span class="jsdoc-var">this.menu.hide</span><span class="jsdoc-syntax">();
178     }
179 });</span></code></body></html>
RooJS - Version 1