1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.menu.Item"></div>/**
* @class Ext.menu.Item
* @extends Ext.menu.BaseItem
* A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
* display items. Item extends the base functionality of {@link Ext.menu.BaseItem} by adding menu-specific
* activation and click handling.
* @constructor
* Creates a new Item
* @param {Object} config Configuration options
* @xtype menuitem
*/
Ext.menu.Item = Ext.extend(Ext.menu.BaseItem, {
<div id="prop-Ext.menu.Item-menu"></div>/**
* @property menu
* @type Ext.menu.Menu
* The submenu associated with this Item if one was configured.
*/
<div id="cfg-Ext.menu.Item-menu"></div>/**
* @cfg {Mixed} menu (optional) Either an instance of {@link Ext.menu.Menu} or the config object for an
* {@link Ext.menu.Menu} which acts as the submenu when this item is activated.
*/
<div id="cfg-Ext.menu.Item-icon"></div>/**
* @cfg {String} icon The path to an icon to display in this item (defaults to Ext.BLANK_IMAGE_URL). If
* icon is specified {@link #iconCls} should not be.
*/
<div id="cfg-Ext.menu.Item-iconCls"></div>/**
* @cfg {String} iconCls A CSS class that specifies a background image that will be used as the icon for
* this item (defaults to ''). If iconCls is specified {@link #icon} should not be.
*/
<div id="cfg-Ext.menu.Item-text"></div>/**
* @cfg {String} text The text to display in this item (defaults to '').
*/
<div id="cfg-Ext.menu.Item-href"></div>/**
* @cfg {String} href The href attribute to use for the underlying anchor link (defaults to '#').
*/
<div id="cfg-Ext.menu.Item-hrefTarget"></div>/**
* @cfg {String} hrefTarget The target attribute to use for the underlying anchor link (defaults to '').
*/
<div id="cfg-Ext.menu.Item-itemCls"></div>/**
* @cfg {String} itemCls The default CSS class to use for menu items (defaults to 'x-menu-item')
*/
itemCls : 'x-menu-item',
<div id="cfg-Ext.menu.Item-canActivate"></div>/**
* @cfg {Boolean} canActivate True if this item can be visually activated (defaults to true)
*/
canActivate : true,
<div id="cfg-Ext.menu.Item-showDelay"></div>/**
* @cfg {Number} showDelay Length of time in milliseconds to wait before showing this item (defaults to 200)
*/
showDelay: 200,
<div id="cfg-Ext.menu.Item-altText"></div>/**
* @cfg {String} altText The altText to use for the icon, if it exists. Defaults to <tt>''</tt>.
*/
altText: '',
// doc'd in BaseItem
hideDelay: 200,
// private
ctype: 'Ext.menu.Item',
initComponent : function(){
Ext.menu.Item.superclass.initComponent.call(this);
if(this.menu){
// If array of items, turn it into an object config so we
// can set the ownerCt property in the config
if (Ext.isArray(this.menu)){
this.menu = { items: this.menu };
}
// An object config will work here, but an instance of a menu
// will have already setup its ref's and have no effect
if (Ext.isObject(this.menu)){
this.menu.ownerCt = this;
}
this.menu = Ext.menu.MenuMgr.get(this.menu);
this.menu.ownerCt = undefined;
}
},
// private
onRender : function(container, position){
if (!this.itemTpl) {
this.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
'<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
'<tpl if="hrefTarget">',
' target="{hrefTarget}"',
'</tpl>',
'>',
'<img alt="{altText}" src="{icon}" class="x-menu-item-icon {iconCls}"/>',
'<span class="x-menu-item-text">{text}</span>',
'</a>'
);
}
var a = this.getTemplateArgs();
this.el = position ? this.itemTpl.insertBefore(position, a, true) : this.itemTpl.append(container, a, true);
this.iconEl = this.el.child('img.x-menu-item-icon');
this.textEl = this.el.child('.x-menu-item-text');
if(!this.href) { // if no link defined, prevent the default anchor event
this.mon(this.el, 'click', Ext.emptyFn, null, { preventDefault: true });
}
Ext.menu.Item.superclass.onRender.call(this, container, position);
},
getTemplateArgs: function() {
return {
id: this.id,
cls: this.itemCls + (this.menu ? ' x-menu-item-arrow' : '') + (this.cls ? ' ' + this.cls : ''),
href: this.href || '#',
hrefTarget: this.hrefTarget,
icon: this.icon || Ext.BLANK_IMAGE_URL,
iconCls: this.iconCls || '',
text: this.itemText||this.text||' ',
altText: this.altText || ''
};
},
<div id="method-Ext.menu.Item-setText"></div>/**
* Sets the text to display in this menu item
* @param {String} text The text to display
*/
setText : function(text){
this.text = text||' ';
if(this.rendered){
this.textEl.update(this.text);
this.parentMenu.layout.doAutoSize();
}
},
<div id="method-Ext.menu.Item-setIconClass"></div>/**
* Sets the CSS class to apply to the item's icon element
* @param {String} cls The CSS class to apply
*/
setIconClass : function(cls){
var oldCls = this.iconCls;
this.iconCls = cls;
if(this.rendered){
this.iconEl.replaceClass(oldCls, this.iconCls);
}
},
//private
beforeDestroy: function(){
clearTimeout(this.showTimer);
clearTimeout(this.hideTimer);
if (this.menu){
delete this.menu.ownerCt;
this.menu.destroy();
}
Ext.menu.Item.superclass.beforeDestroy.call(this);
},
// private
handleClick : function(e){
if(!this.href){ // if no link defined, stop the event automatically
e.stopEvent();
}
Ext.menu.Item.superclass.handleClick.apply(this, arguments);
},
// private
activate : function(autoExpand){
if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
this.focus();
if(autoExpand){
this.expandMenu();
}
}
return true;
},
// private
shouldDeactivate : function(e){
if(Ext.menu.Item.superclass.shouldDeactivate.call(this, e)){
if(this.menu && this.menu.isVisible()){
return !this.menu.getEl().getRegion().contains(e.getPoint());
}
return true;
}
return false;
},
// private
deactivate : function(){
Ext.menu.Item.superclass.deactivate.apply(this, arguments);
this.hideMenu();
},
// private
expandMenu : function(autoActivate){
if(!this.disabled && this.menu){
clearTimeout(this.hideTimer);
delete this.hideTimer;
if(!this.menu.isVisible() && !this.showTimer){
this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
}else if (this.menu.isVisible() && autoActivate){
this.menu.tryActivate(0, 1);
}
}
},
// private
deferExpand : function(autoActivate){
delete this.showTimer;
this.menu.show(this.container, this.parentMenu.subMenuAlign || 'tl-tr?', this.parentMenu);
if(autoActivate){
this.menu.tryActivate(0, 1);
}
},
// private
hideMenu : function(){
clearTimeout(this.showTimer);
delete this.showTimer;
if(!this.hideTimer && this.menu && this.menu.isVisible()){
this.hideTimer = this.deferHide.defer(this.hideDelay, this);
}
},
// private
deferHide : function(){
delete this.hideTimer;
if(this.menu.over){
this.parentMenu.setActiveItem(this, false);
}else{
this.menu.hide();
}
}
});
Ext.reg('menuitem', Ext.menu.Item);</pre>
</body>
</html>
|
