1 | /*! |
---|
2 | * Ext JS Library 3.4.0 |
---|
3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
4 | * licensing@sencha.com |
---|
5 | * http://www.sencha.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.Element |
---|
9 | */ |
---|
10 | (function(){ |
---|
11 | var D = Ext.lib.Dom, |
---|
12 | LEFT = "left", |
---|
13 | RIGHT = "right", |
---|
14 | TOP = "top", |
---|
15 | BOTTOM = "bottom", |
---|
16 | POSITION = "position", |
---|
17 | STATIC = "static", |
---|
18 | RELATIVE = "relative", |
---|
19 | AUTO = "auto", |
---|
20 | ZINDEX = "z-index"; |
---|
21 | |
---|
22 | Ext.Element.addMethods({ |
---|
23 | /** |
---|
24 | * Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
25 | * @return {Number} The X position of the element |
---|
26 | */ |
---|
27 | getX : function(){ |
---|
28 | return D.getX(this.dom); |
---|
29 | }, |
---|
30 | |
---|
31 | /** |
---|
32 | * Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
33 | * @return {Number} The Y position of the element |
---|
34 | */ |
---|
35 | getY : function(){ |
---|
36 | return D.getY(this.dom); |
---|
37 | }, |
---|
38 | |
---|
39 | /** |
---|
40 | * Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
41 | * @return {Array} The XY position of the element |
---|
42 | */ |
---|
43 | getXY : function(){ |
---|
44 | return D.getXY(this.dom); |
---|
45 | }, |
---|
46 | |
---|
47 | /** |
---|
48 | * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates. |
---|
49 | * @param {Mixed} element The element to get the offsets from. |
---|
50 | * @return {Array} The XY page offsets (e.g. [100, -200]) |
---|
51 | */ |
---|
52 | getOffsetsTo : function(el){ |
---|
53 | var o = this.getXY(), |
---|
54 | e = Ext.fly(el, '_internal').getXY(); |
---|
55 | return [o[0]-e[0],o[1]-e[1]]; |
---|
56 | }, |
---|
57 | |
---|
58 | /** |
---|
59 | * Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
60 | * @param {Number} The X position of the element |
---|
61 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
62 | * @return {Ext.Element} this |
---|
63 | */ |
---|
64 | setX : function(x, animate){ |
---|
65 | return this.setXY([x, this.getY()], this.animTest(arguments, animate, 1)); |
---|
66 | }, |
---|
67 | |
---|
68 | /** |
---|
69 | * Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
70 | * @param {Number} The Y position of the element |
---|
71 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
72 | * @return {Ext.Element} this |
---|
73 | */ |
---|
74 | setY : function(y, animate){ |
---|
75 | return this.setXY([this.getX(), y], this.animTest(arguments, animate, 1)); |
---|
76 | }, |
---|
77 | |
---|
78 | /** |
---|
79 | * Sets the element's left position directly using CSS style (instead of {@link #setX}). |
---|
80 | * @param {String} left The left CSS property value |
---|
81 | * @return {Ext.Element} this |
---|
82 | */ |
---|
83 | setLeft : function(left){ |
---|
84 | this.setStyle(LEFT, this.addUnits(left)); |
---|
85 | return this; |
---|
86 | }, |
---|
87 | |
---|
88 | /** |
---|
89 | * Sets the element's top position directly using CSS style (instead of {@link #setY}). |
---|
90 | * @param {String} top The top CSS property value |
---|
91 | * @return {Ext.Element} this |
---|
92 | */ |
---|
93 | setTop : function(top){ |
---|
94 | this.setStyle(TOP, this.addUnits(top)); |
---|
95 | return this; |
---|
96 | }, |
---|
97 | |
---|
98 | /** |
---|
99 | * Sets the element's CSS right style. |
---|
100 | * @param {String} right The right CSS property value |
---|
101 | * @return {Ext.Element} this |
---|
102 | */ |
---|
103 | setRight : function(right){ |
---|
104 | this.setStyle(RIGHT, this.addUnits(right)); |
---|
105 | return this; |
---|
106 | }, |
---|
107 | |
---|
108 | /** |
---|
109 | * Sets the element's CSS bottom style. |
---|
110 | * @param {String} bottom The bottom CSS property value |
---|
111 | * @return {Ext.Element} this |
---|
112 | */ |
---|
113 | setBottom : function(bottom){ |
---|
114 | this.setStyle(BOTTOM, this.addUnits(bottom)); |
---|
115 | return this; |
---|
116 | }, |
---|
117 | |
---|
118 | /** |
---|
119 | * Sets the position of the element in page coordinates, regardless of how the element is positioned. |
---|
120 | * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
121 | * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based) |
---|
122 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
123 | * @return {Ext.Element} this |
---|
124 | */ |
---|
125 | setXY : function(pos, animate){ |
---|
126 | var me = this; |
---|
127 | if(!animate || !me.anim){ |
---|
128 | D.setXY(me.dom, pos); |
---|
129 | }else{ |
---|
130 | me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion'); |
---|
131 | } |
---|
132 | return me; |
---|
133 | }, |
---|
134 | |
---|
135 | /** |
---|
136 | * Sets the position of the element in page coordinates, regardless of how the element is positioned. |
---|
137 | * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
138 | * @param {Number} x X value for new position (coordinates are page-based) |
---|
139 | * @param {Number} y Y value for new position (coordinates are page-based) |
---|
140 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
141 | * @return {Ext.Element} this |
---|
142 | */ |
---|
143 | setLocation : function(x, y, animate){ |
---|
144 | return this.setXY([x, y], this.animTest(arguments, animate, 2)); |
---|
145 | }, |
---|
146 | |
---|
147 | /** |
---|
148 | * Sets the position of the element in page coordinates, regardless of how the element is positioned. |
---|
149 | * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
150 | * @param {Number} x X value for new position (coordinates are page-based) |
---|
151 | * @param {Number} y Y value for new position (coordinates are page-based) |
---|
152 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
153 | * @return {Ext.Element} this |
---|
154 | */ |
---|
155 | moveTo : function(x, y, animate){ |
---|
156 | return this.setXY([x, y], this.animTest(arguments, animate, 2)); |
---|
157 | }, |
---|
158 | |
---|
159 | /** |
---|
160 | * Gets the left X coordinate |
---|
161 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
162 | * @return {Number} |
---|
163 | */ |
---|
164 | getLeft : function(local){ |
---|
165 | return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0; |
---|
166 | }, |
---|
167 | |
---|
168 | /** |
---|
169 | * Gets the right X coordinate of the element (element X position + element width) |
---|
170 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
171 | * @return {Number} |
---|
172 | */ |
---|
173 | getRight : function(local){ |
---|
174 | var me = this; |
---|
175 | return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0; |
---|
176 | }, |
---|
177 | |
---|
178 | /** |
---|
179 | * Gets the top Y coordinate |
---|
180 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
181 | * @return {Number} |
---|
182 | */ |
---|
183 | getTop : function(local) { |
---|
184 | return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0; |
---|
185 | }, |
---|
186 | |
---|
187 | /** |
---|
188 | * Gets the bottom Y coordinate of the element (element Y position + element height) |
---|
189 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
190 | * @return {Number} |
---|
191 | */ |
---|
192 | getBottom : function(local){ |
---|
193 | var me = this; |
---|
194 | return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0; |
---|
195 | }, |
---|
196 | |
---|
197 | /** |
---|
198 | * Initializes positioning on this element. If a desired position is not passed, it will make the |
---|
199 | * the element positioned relative IF it is not already positioned. |
---|
200 | * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed" |
---|
201 | * @param {Number} zIndex (optional) The zIndex to apply |
---|
202 | * @param {Number} x (optional) Set the page X position |
---|
203 | * @param {Number} y (optional) Set the page Y position |
---|
204 | */ |
---|
205 | position : function(pos, zIndex, x, y){ |
---|
206 | var me = this; |
---|
207 | |
---|
208 | if(!pos && me.isStyle(POSITION, STATIC)){ |
---|
209 | me.setStyle(POSITION, RELATIVE); |
---|
210 | } else if(pos) { |
---|
211 | me.setStyle(POSITION, pos); |
---|
212 | } |
---|
213 | if(zIndex){ |
---|
214 | me.setStyle(ZINDEX, zIndex); |
---|
215 | } |
---|
216 | if(x || y) me.setXY([x || false, y || false]); |
---|
217 | }, |
---|
218 | |
---|
219 | /** |
---|
220 | * Clear positioning back to the default when the document was loaded |
---|
221 | * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'. |
---|
222 | * @return {Ext.Element} this |
---|
223 | */ |
---|
224 | clearPositioning : function(value){ |
---|
225 | value = value || ''; |
---|
226 | this.setStyle({ |
---|
227 | left : value, |
---|
228 | right : value, |
---|
229 | top : value, |
---|
230 | bottom : value, |
---|
231 | "z-index" : "", |
---|
232 | position : STATIC |
---|
233 | }); |
---|
234 | return this; |
---|
235 | }, |
---|
236 | |
---|
237 | /** |
---|
238 | * Gets an object with all CSS positioning properties. Useful along with setPostioning to get |
---|
239 | * snapshot before performing an update and then restoring the element. |
---|
240 | * @return {Object} |
---|
241 | */ |
---|
242 | getPositioning : function(){ |
---|
243 | var l = this.getStyle(LEFT); |
---|
244 | var t = this.getStyle(TOP); |
---|
245 | return { |
---|
246 | "position" : this.getStyle(POSITION), |
---|
247 | "left" : l, |
---|
248 | "right" : l ? "" : this.getStyle(RIGHT), |
---|
249 | "top" : t, |
---|
250 | "bottom" : t ? "" : this.getStyle(BOTTOM), |
---|
251 | "z-index" : this.getStyle(ZINDEX) |
---|
252 | }; |
---|
253 | }, |
---|
254 | |
---|
255 | /** |
---|
256 | * Set positioning with an object returned by getPositioning(). |
---|
257 | * @param {Object} posCfg |
---|
258 | * @return {Ext.Element} this |
---|
259 | */ |
---|
260 | setPositioning : function(pc){ |
---|
261 | var me = this, |
---|
262 | style = me.dom.style; |
---|
263 | |
---|
264 | me.setStyle(pc); |
---|
265 | |
---|
266 | if(pc.right == AUTO){ |
---|
267 | style.right = ""; |
---|
268 | } |
---|
269 | if(pc.bottom == AUTO){ |
---|
270 | style.bottom = ""; |
---|
271 | } |
---|
272 | |
---|
273 | return me; |
---|
274 | }, |
---|
275 | |
---|
276 | /** |
---|
277 | * Translates the passed page coordinates into left/top css values for this element |
---|
278 | * @param {Number/Array} x The page x or an array containing [x, y] |
---|
279 | * @param {Number} y (optional) The page y, required if x is not an array |
---|
280 | * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)} |
---|
281 | */ |
---|
282 | translatePoints : function(x, y){ |
---|
283 | y = isNaN(x[1]) ? y : x[1]; |
---|
284 | x = isNaN(x[0]) ? x : x[0]; |
---|
285 | var me = this, |
---|
286 | relative = me.isStyle(POSITION, RELATIVE), |
---|
287 | o = me.getXY(), |
---|
288 | l = parseInt(me.getStyle(LEFT), 10), |
---|
289 | t = parseInt(me.getStyle(TOP), 10); |
---|
290 | |
---|
291 | l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft); |
---|
292 | t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop); |
---|
293 | |
---|
294 | return {left: (x - o[0] + l), top: (y - o[1] + t)}; |
---|
295 | }, |
---|
296 | |
---|
297 | animTest : function(args, animate, i) { |
---|
298 | return !!animate && this.preanim ? this.preanim(args, i) : false; |
---|
299 | } |
---|
300 | }); |
---|
301 | })(); |
---|