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
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
|
<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
*/
/**
* @class Ext.Element
*/
// special markup used throughout Ext when box wrapping elements
Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
Ext.Element.addMethods(function(){
var INTERNAL = "_internal",
pxMatch = /(\d+\.?\d+)px/;
return {
<div id="method-Ext.Element-applyStyles"></div>/**
* More flexible version of {@link #setStyle} for setting style properties.
* @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
* a function which returns such a specification.
* @return {Ext.Element} this
*/
applyStyles : function(style){
Ext.DomHelper.applyStyles(this.dom, style);
return this;
},
<div id="method-Ext.Element-getStyles"></div>/**
* Returns an object with properties matching the styles requested.
* For example, el.getStyles('color', 'font-size', 'width') might return
* {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
* @param {String} style1 A style name
* @param {String} style2 A style name
* @param {String} etc.
* @return {Object} The style object
*/
getStyles : function(){
var ret = {};
Ext.each(arguments, function(v) {
ret[v] = this.getStyle(v);
},
this);
return ret;
},
// private ==> used by ext full
setOverflow : function(v){
var dom = this.dom;
if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
dom.style.overflow = 'hidden';
(function(){dom.style.overflow = 'auto';}).defer(1);
}else{
dom.style.overflow = v;
}
},
<div id="method-Ext.Element-boxWrap"></div>/**
* <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
* a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
* <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
* {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup
* is of this form:</p>
* <pre><code>
Ext.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
* </code></pre>
* <p>Example usage:</p>
* <pre><code>
// Basic box wrap
Ext.get("foo").boxWrap();
// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addClass("x-box-blue");
* </code></pre>
* @param {String} class (optional) A base CSS class to apply to the containing wrapper element
* (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
* this name to make the overall effect work, so if you supply an alternate base class, make sure you
* also supply all of the necessary rules.
* @return {Ext.Element} The outermost wrapping element of the created box structure.
*/
boxWrap : function(cls){
cls = cls || 'x-box';
var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
return el;
},
<div id="method-Ext.Element-setSize"></div>/**
* Set the size of this Element. If animation is true, both width and height will be animated concurrently.
* @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
* <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
* </ul></div>
* @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
* <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
* <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
* </ul></div>
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setSize : function(width, height, animate){
var me = this;
if(typeof width == 'object'){ // in case of object from getSize()
height = width.height;
width = width.width;
}
width = me.adjustWidth(width);
height = me.adjustHeight(height);
if(!animate || !me.anim){
me.dom.style.width = me.addUnits(width);
me.dom.style.height = me.addUnits(height);
}else{
me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
}
return me;
},
<div id="method-Ext.Element-getComputedHeight"></div>/**
* Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
* when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
* if a height has not been set using CSS.
* @return {Number}
*/
getComputedHeight : function(){
var me = this,
h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
if(!h){
h = parseFloat(me.getStyle('height')) || 0;
if(!me.isBorderBox()){
h += me.getFrameWidth('tb');
}
}
return h;
},
<div id="method-Ext.Element-getComputedWidth"></div>/**
* Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
* when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
* if a width has not been set using CSS.
* @return {Number}
*/
getComputedWidth : function(){
var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
if(!w){
w = parseFloat(this.getStyle('width')) || 0;
if(!this.isBorderBox()){
w += this.getFrameWidth('lr');
}
}
return w;
},
<div id="method-Ext.Element-getFrameWidth"></div>/**
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
for more information about the sides.
* @param {String} sides
* @return {Number}
*/
getFrameWidth : function(sides, onlyContentBox){
return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
},
<div id="method-Ext.Element-addClassOnOver"></div>/**
* Sets up event handlers to add and remove a css class when the mouse is over this element
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnOver : function(className){
this.hover(
function(){
Ext.fly(this, INTERNAL).addClass(className);
},
function(){
Ext.fly(this, INTERNAL).removeClass(className);
}
);
return this;
},
<div id="method-Ext.Element-addClassOnFocus"></div>/**
* Sets up event handlers to add and remove a css class when this element has the focus
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnFocus : function(className){
this.on("focus", function(){
Ext.fly(this, INTERNAL).addClass(className);
}, this.dom);
this.on("blur", function(){
Ext.fly(this, INTERNAL).removeClass(className);
}, this.dom);
return this;
},
<div id="method-Ext.Element-addClassOnClick"></div>/**
* Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
* @param {String} className
* @return {Ext.Element} this
*/
addClassOnClick : function(className){
var dom = this.dom;
this.on("mousedown", function(){
Ext.fly(dom, INTERNAL).addClass(className);
var d = Ext.getDoc(),
fn = function(){
Ext.fly(dom, INTERNAL).removeClass(className);
d.removeListener("mouseup", fn);
};
d.on("mouseup", fn);
});
return this;
},
<div id="method-Ext.Element-getViewSize"></div>/**
* <p>Returns the dimensions of the element available to lay content out in.<p>
* <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
* example:<pre><code>
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
* </code></pre>
*
* getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
* To obtain the size including scrollbars, use getStyleSize
*
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
*/
getViewSize : function(){
var doc = document,
d = this.dom,
isDoc = (d == doc || d == doc.body);
// If the body, use Ext.lib.Dom
if (isDoc) {
var extdom = Ext.lib.Dom;
return {
width : extdom.getViewWidth(),
height : extdom.getViewHeight()
};
// Else use clientHeight/clientWidth
} else {
return {
width : d.clientWidth,
height : d.clientHeight
};
}
},
<div id="method-Ext.Element-getStyleSize"></div>/**
* <p>Returns the dimensions of the element available to lay content out in.<p>
*
* getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
* To obtain the size excluding scrollbars, use getViewSize
*
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
*/
getStyleSize : function(){
var me = this,
w, h,
doc = document,
d = this.dom,
isDoc = (d == doc || d == doc.body),
s = d.style;
// If the body, use Ext.lib.Dom
if (isDoc) {
var extdom = Ext.lib.Dom;
return {
width : extdom.getViewWidth(),
height : extdom.getViewHeight()
};
}
// Use Styles if they are set
if(s.width && s.width != 'auto'){
w = parseFloat(s.width);
if(me.isBorderBox()){
w -= me.getFrameWidth('lr');
}
}
// Use Styles if they are set
if(s.height && s.height != 'auto'){
h = parseFloat(s.height);
if(me.isBorderBox()){
h -= me.getFrameWidth('tb');
}
}
// Use getWidth/getHeight if style not set.
return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
},
<div id="method-Ext.Element-getSize"></div>/**
* Returns the size of the element.
* @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
*/
getSize : function(contentSize){
return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
},
<div id="method-Ext.Element-repaint"></div>/**
* Forces the browser to repaint this element
* @return {Ext.Element} this
*/
repaint : function(){
var dom = this.dom;
this.addClass("x-repaint");
setTimeout(function(){
Ext.fly(dom).removeClass("x-repaint");
}, 1);
return this;
},
<div id="method-Ext.Element-unselectable"></div>/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
unselectable : function(){
this.dom.unselectable = "on";
return this.swallowEvent("selectstart", true).
applyStyles("-moz-user-select:none;-khtml-user-select:none;").
addClass("x-unselectable");
},
<div id="method-Ext.Element-getMargins"></div>/**
* Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
* then it returns the calculated width of the sides (see getPadding)
* @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
* @return {Object/Number}
*/
getMargins : function(side){
var me = this,
key,
hash = {t:"top", l:"left", r:"right", b: "bottom"},
o = {};
if (!side) {
for (key in me.margins){
o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
}
return o;
} else {
return me.addStyles.call(me, side, me.margins);
}
}
};
}());
</pre>
</body>
</html>
|
