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
|
<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
*/
Ext.Element.addMethods({
<div id="method-Ext.Element-setBox"></div>/**
* Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
* @param {Object} box The box to fill {x, y, width, height}
* @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setBox : function(box, adjust, animate){
var me = this,
w = box.width,
h = box.height;
if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
}
me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
return me;
},
<div id="method-Ext.Element-getBox"></div>/**
* Return an object defining the area of this Element which can be passed to {@link #setBox} to
* set another Element's size/location to match this element.
* @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
* @return {Object} box An object in the format<pre><code>
{
x: <Element's X position>,
y: <Element's Y position>,
width: <Element's width>,
height: <Element's height>,
bottom: <Element's lower bound>,
right: <Element's rightmost bound>
}
</code></pre>
* The returned object may also be addressed as an Array where index 0 contains the X position
* and index 1 contains the Y position. So the result may also be used for {@link #setXY}
*/
getBox : function(contentBox, local) {
var me = this,
xy,
left,
top,
getBorderWidth = me.getBorderWidth,
getPadding = me.getPadding,
l,
r,
t,
b;
if(!local){
xy = me.getXY();
}else{
left = parseInt(me.getStyle("left"), 10) || 0;
top = parseInt(me.getStyle("top"), 10) || 0;
xy = [left, top];
}
var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
if(!contentBox){
bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
}else{
l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
}
bx.right = bx.x + bx.width;
bx.bottom = bx.y + bx.height;
return bx;
},
<div id="method-Ext.Element-move"></div>/**
* Move this element relative to its current position.
* @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
* @param {Number} distance How far to move the element in pixels
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
move : function(direction, distance, animate){
var me = this,
xy = me.getXY(),
x = xy[0],
y = xy[1],
left = [x - distance, y],
right = [x + distance, y],
top = [x, y - distance],
bottom = [x, y + distance],
hash = {
l : left,
left : left,
r : right,
right : right,
t : top,
top : top,
up : top,
b : bottom,
bottom : bottom,
down : bottom
};
direction = direction.toLowerCase();
me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
},
<div id="method-Ext.Element-setLeftTop"></div>/**
* Quick set left and top adding default units
* @param {String} left The left CSS property value
* @param {String} top The top CSS property value
* @return {Ext.Element} this
*/
setLeftTop : function(left, top){
var me = this,
style = me.dom.style;
style.left = me.addUnits(left);
style.top = me.addUnits(top);
return me;
},
<div id="method-Ext.Element-getRegion"></div>/**
* Returns the region of the given element.
* The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
* @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
*/
getRegion : function(){
return Ext.lib.Dom.getRegion(this.dom);
},
<div id="method-Ext.Element-setBounds"></div>/**
* Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
* @param {Number} x X value for new position (coordinates are page-based)
* @param {Number} y Y value for new position (coordinates are page-based)
* @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.
* </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
*/
setBounds : function(x, y, width, height, animate){
var me = this;
if (!animate || !me.anim) {
me.setSize(width, height);
me.setLocation(x, y);
} else {
me.anim({points: {to: [x, y]},
width: {to: me.adjustWidth(width)},
height: {to: me.adjustHeight(height)}},
me.preanim(arguments, 4),
'motion');
}
return me;
},
<div id="method-Ext.Element-setRegion"></div>/**
* Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
* @param {Ext.lib.Region} region The region to fill
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setRegion : function(region, animate) {
return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
}
});</pre>
</body>
</html>
|
