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