4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-Element'>/**
19 </span> * @class Ext.Element
21 Ext.Element.addMethods({
22 <span id='Ext-Element-method-getAnchorXY'> /**
23 </span> * Gets the x,y coordinates specified by the anchor position on the element.
24 * @param {String} [anchor='c'] The specified anchor position. See {@link #alignTo}
25 * for details on supported anchor positions.
26 * @param {Boolean} [local] True to get the local (element top/left-relative) anchor position instead
28 * @param {Object} [size] An object containing the size to use for calculating anchor position
29 * {width: (target width), height: (target height)} (defaults to the element's current size)
30 * @return {Number[]} [x, y] An array containing the element's x and y coordinates
32 getAnchorXY : function(anchor, local, s){
33 //Passing a different size is useful for pre-calculating anchors,
34 //especially for anchored animations that change the el size.
35 anchor = (anchor || "tl").toLowerCase();
39 vp = me.dom == document.body || me.dom == document,
40 w = s.width || vp ? Ext.Element.getViewWidth() : me.getWidth(),
41 h = s.height || vp ? Ext.Element.getViewHeight() : me.getHeight(),
45 scroll = me.getScroll(),
46 extraX = vp ? scroll.left : !local ? o[0] : 0,
47 extraY = vp ? scroll.top : !local ? o[1] : 0,
49 c : [r(w * 0.5), r(h * 0.5)],
61 return [xy[0] + extraX, xy[1] + extraY];
64 <span id='Ext-Element-method-anchorTo'> /**
65 </span> * Anchors an element to another element and realigns it when the window is resized.
66 * @param {String/HTMLElement/Ext.Element} element The element to align to.
67 * @param {String} position The position to align to.
68 * @param {Number[]} [offsets] Offset the positioning by [x, y]
69 * @param {Boolean/Object} [animate] True for the default animation or a standard Element animation config object
70 * @param {Boolean/Number} [monitorScroll] True to monitor body scroll and reposition. If this parameter
71 * is a number, it is used as the buffer delay (defaults to 50ms).
72 * @param {Function} [callback] The function to call after the animation finishes
73 * @return {Ext.Element} this
75 anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
78 scroll = !Ext.isEmpty(monitorScroll),
80 Ext.fly(dom).alignTo(el, alignment, offsets, animate);
81 Ext.callback(callback, Ext.fly(dom));
83 anchor = this.getAnchor();
85 // previous listener anchor, remove it
92 Ext.EventManager.onWindowResize(action, null);
95 Ext.EventManager.on(window, 'scroll', action, null,
96 {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
98 action.call(me); // align immediately
102 <span id='Ext-Element-method-removeAnchor'> /**
103 </span> * Remove any anchor to this element. See {@link #anchorTo}.
104 * @return {Ext.Element} this
106 removeAnchor : function(){
108 anchor = this.getAnchor();
110 if(anchor && anchor.fn){
111 Ext.EventManager.removeResizeListener(anchor.fn);
113 Ext.EventManager.un(window, 'scroll', anchor.fn);
121 getAnchor : function(){
122 var data = Ext.Element.data,
127 var anchor = data(dom, '_anchor');
130 anchor = data(dom, '_anchor', {});
135 getAlignVector: function(el, spec, offset) {
137 side = {t:"top", l:"left", r:"right", b: "bottom"},
138 thisRegion = me.getRegion(),
145 sourceClass: 'Ext.Element',
146 sourceMethod: 'getAlignVector',
147 msg: 'Attempted to align an element that doesn\'t exist'
152 elRegion = el.getRegion();
155 <span id='Ext-Element-method-getAlignToXY'> /**
156 </span> * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
157 * supported position values.
158 * @param {String/HTMLElement/Ext.Element} element The element to align to.
159 * @param {String} [position="tl-bl?"] The position to align to (defaults to )
160 * @param {Number[]} [offsets] Offset the positioning by [x, y]
161 * @return {Number[]} [x, y]
163 getAlignToXY : function(el, p, o){
169 sourceClass: 'Ext.Element',
170 sourceMethod: 'getAlignToXY',
171 msg: 'Attempted to align an element that doesn\'t exist'
177 p = (!p || p == "?" ? "tl-bl?" : (!(/-/).test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
185 //constrain the aligned el to viewport if necessary
189 dw = Ext.Element.getViewWidth() -10, // 10px of margin for ie
190 dh = Ext.Element.getViewHeight()-10, // 10px of margin for ie
198 docElement = doc.documentElement,
200 scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
201 scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
202 c = false, //constrain to viewport
205 m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
210 sourceClass: 'Ext.Element',
211 sourceMethod: 'getAlignToXY',
215 msg: 'Attemmpted to align an element with an invalid position: "' + p + '"'
224 //Subtract the aligned el's internal xy from the target's offset xy
225 //plus custom offset to get the aligned el's new offset xy
226 a1 = me.getAnchorXY(p1, true);
227 a2 = el.getAnchorXY(p2, false);
229 x = a2[0] - a1[0] + o[0];
230 y = a2[1] - a1[1] + o[1];
236 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
237 //perpendicular to the vp border, allow the aligned el to slide on that border,
238 //otherwise swap the aligned el to the opposite border of the target.
240 p1x = p1.charAt(p1.length-1);
242 p2x = p2.charAt(p2.length-1);
243 swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
244 swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
247 if (x + w > dw + scrollX) {
248 x = swapX ? r.left-w : dw+scrollX-w;
250 if (x < scrollX) {
251 x = swapX ? r.right : scrollX;
253 if (y + h > dh + scrollY) {
254 y = swapY ? r.top-h : dh+scrollY-h;
257 y = swapY ? r.bottom : scrollY;
263 <span id='Ext-Element-method-alignTo'> /**
264 </span> * Aligns this element with another element relative to the specified anchor points. If the other element is the
265 * document it aligns it to the viewport.
266 * The position parameter is optional, and can be specified in any one of the following formats:
268 * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
269 * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
270 * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
271 * deprecated in favor of the newer two anchor syntax below</i>.</li>
272 * <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
273 * element's anchor point, and the second value is used as the target's anchor point.</li>
275 * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
276 * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
277 * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
278 * that specified in order to enforce the viewport constraints.
279 * Following are all of the supported anchor positions:
282 ----- -----------------------------
283 tl The top left corner (default)
284 t The center of the top edge
285 tr The top right corner
286 l The center of the left edge
287 c In the center of the element
288 r The center of the right edge
289 bl The bottom left corner
290 b The center of the bottom edge
291 br The bottom right corner
294 <pre><code>
295 // align el to other-el using the default positioning ("tl-bl", non-constrained)
296 el.alignTo("other-el");
298 // align the top left corner of el with the top right corner of other-el (constrained to viewport)
299 el.alignTo("other-el", "tr?");
301 // align the bottom right corner of el with the center left edge of other-el
302 el.alignTo("other-el", "br-l?");
304 // align the center of el with the bottom left corner of other-el and
305 // adjust the x position by -6 pixels (and the y position by 0)
306 el.alignTo("other-el", "c-bl", [-6, 0]);
307 </code></pre>
308 * @param {String/HTMLElement/Ext.Element} element The element to align to.
309 * @param {String} [position="tl-bl?"] The position to align to
310 * @param {Number[]} [offsets] Offset the positioning by [x, y]
311 * @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
312 * @return {Ext.Element} this
314 alignTo : function(element, position, offsets, animate){
316 return me.setXY(me.getAlignToXY(element, position, offsets),
317 me.anim && !!animate ? me.anim(animate) : false);
320 // private ==> used outside of core
321 adjustForConstraints : function(xy, parent) {
322 var vector = this.getConstrainVector(parent, xy);
330 <span id='Ext-Element-method-getConstrainVector'> /**
331 </span> * <p>Returns the <code>[X, Y]</code> vector by which this element must be translated to make a best attempt
332 * to constrain within the passed constraint. Returns <code>false</code> is this element does not need to be moved.</p>
333 * <p>Priority is given to constraining the top and left within the constraint.</p>
334 * <p>The constraint may either be an existing element into which this element is to be constrained, or
335 * an {@link Ext.util.Region Region} into which this element is to be constrained.</p>
336 * @param constrainTo {Mixed} The Element or {@link Ext.util.Region Region} into which this element is to be constrained.
337 * @param proposedPosition {Array} A proposed <code>[X, Y]</code> position to test for validity and to produce a vector for instead
338 * of using this Element's current position;
339 * @returns {Number[]/Boolean} <b>If</b> this element <i>needs</i> to be translated, an <code>[X, Y]</code>
340 * vector by which this element must be translated. Otherwise, <code>false</code>.
342 getConstrainVector: function(constrainTo, proposedPosition) {
343 if (!(constrainTo instanceof Ext.util.Region)) {
344 constrainTo = Ext.get(constrainTo).getViewRegion();
346 var thisRegion = this.getRegion(),
348 shadowSize = this.shadow && this.shadow.offset,
351 // Shift this region to occupy the proposed position
352 if (proposedPosition) {
353 thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
356 // Reduce the constrain region to allow for shadow
357 // TODO: Rewrite the Shadow class. When that's done, get the extra for each side from the Shadow.
359 constrainTo.adjust(0, -shadowSize, -shadowSize, shadowSize);
362 // Constrain the X coordinate by however much this Element overflows
363 if (thisRegion.right > constrainTo.right) {
365 vector[0] = (constrainTo.right - thisRegion.right); // overflowed the right
367 if (thisRegion.left + vector[0] < constrainTo.left) {
369 vector[0] = (constrainTo.left - thisRegion.left); // overflowed the left
372 // Constrain the Y coordinate by however much this Element overflows
373 if (thisRegion.bottom > constrainTo.bottom) {
375 vector[1] = (constrainTo.bottom - thisRegion.bottom); // overflowed the bottom
377 if (thisRegion.top + vector[1] < constrainTo.top) {
379 vector[1] = (constrainTo.top - thisRegion.top); // overflowed the top
381 return overflowed ? vector : false;
384 <span id='Ext-Element-method-getCenterXY'> /**
385 </span> * Calculates the x, y to center this element on the screen
386 * @return {Number[]} The x, y values [x, y]
388 getCenterXY : function(){
389 return this.getAlignToXY(document, 'c-c');
392 <span id='Ext-Element-method-center'> /**
393 </span> * Centers the Element in either the viewport, or another Element.
394 * @param {String/HTMLElement/Ext.Element} centerIn (optional) The element in which to center the element.
396 center : function(centerIn){
397 return this.alignTo(centerIn || document, 'c-c');