3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 Ext.Element.addMethods({
\r
12 * Gets the x,y coordinates specified by the anchor position on the element.
\r
13 * @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
\r
14 * for details on supported anchor positions.
\r
15 * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
\r
16 * of page coordinates
\r
17 * @param {Object} size (optional) An object containing the size to use for calculating anchor position
\r
18 * {width: (target width), height: (target height)} (defaults to the element's current size)
\r
19 * @return {Array} [x, y] An array containing the element's x and y coordinates
\r
21 getAnchorXY : function(anchor, local, s){
\r
22 //Passing a different size is useful for pre-calculating anchors,
\r
23 //especially for anchored animations that change the el size.
\r
24 anchor = (anchor || "tl").toLowerCase();
\r
28 vp = me.dom == document.body || me.dom == document,
\r
29 w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),
\r
30 h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),
\r
34 scroll = me.getScroll(),
\r
35 extraX = vp ? scroll.left : !local ? o[0] : 0,
\r
36 extraY = vp ? scroll.top : !local ? o[1] : 0,
\r
38 c : [r(w * 0.5), r(h * 0.5)],
\r
39 t : [r(w * 0.5), 0],
\r
40 l : [0, r(h * 0.5)],
\r
41 r : [w, r(h * 0.5)],
\r
42 b : [r(w * 0.5), h],
\r
50 return [xy[0] + extraX, xy[1] + extraY];
\r
54 * Anchors an element to another element and realigns it when the window is resized.
\r
55 * @param {Mixed} element The element to align to.
\r
56 * @param {String} position The position to align to.
\r
57 * @param {Array} offsets (optional) Offset the positioning by [x, y]
\r
58 * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
\r
59 * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
\r
60 * is a number, it is used as the buffer delay (defaults to 50ms).
\r
61 * @param {Function} callback The function to call after the animation finishes
\r
62 * @return {Ext.Element} this
\r
64 anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
\r
69 Ext.fly(dom).alignTo(el, alignment, offsets, animate);
\r
70 Ext.callback(callback, Ext.fly(dom));
\r
73 Ext.EventManager.onWindowResize(action, me);
\r
75 if(!Ext.isEmpty(monitorScroll)){
\r
76 Ext.EventManager.on(window, 'scroll', action, me,
\r
77 {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
\r
79 action.call(me); // align immediately
\r
84 * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
\r
85 * supported position values.
\r
86 * @param {Mixed} element The element to align to.
\r
87 * @param {String} position The position to align to.
\r
88 * @param {Array} offsets (optional) Offset the positioning by [x, y]
\r
89 * @return {Array} [x, y]
\r
91 getAlignToXY : function(el, p, o){
\r
95 throw "Element.alignToXY with an element that doesn't exist";
\r
99 p = (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();
\r
107 //constrain the aligned el to viewport if necessary
\r
111 dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie
\r
112 dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie
\r
120 docElement = doc.documentElement,
\r
121 docBody = doc.body,
\r
122 scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
\r
123 scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
\r
124 c = false, //constrain to viewport
\r
127 m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
\r
130 throw "Element.alignTo with an invalid alignment " + p;
\r
137 //Subtract the aligned el's internal xy from the target's offset xy
\r
138 //plus custom offset to get the aligned el's new offset xy
\r
139 a1 = me.getAnchorXY(p1, true);
\r
140 a2 = el.getAnchorXY(p2, false);
\r
142 x = a2[0] - a1[0] + o[0];
\r
143 y = a2[1] - a1[1] + o[1];
\r
147 h = me.getHeight();
\r
148 r = el.getRegion();
\r
149 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
\r
150 //perpendicular to the vp border, allow the aligned el to slide on that border,
\r
151 //otherwise swap the aligned el to the opposite border of the target.
\r
152 p1y = p1.charAt(0);
\r
153 p1x = p1.charAt(p1.length-1);
\r
154 p2y = p2.charAt(0);
\r
155 p2x = p2.charAt(p2.length-1);
\r
156 swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
\r
157 swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
\r
160 if (x + w > dw + scrollX) {
\r
161 x = swapX ? r.left-w : dw+scrollX-w;
\r
164 x = swapX ? r.right : scrollX;
\r
166 if (y + h > dh + scrollY) {
\r
167 y = swapY ? r.top-h : dh+scrollY-h;
\r
170 y = swapY ? r.bottom : scrollY;
\r
177 * Aligns this element with another element relative to the specified anchor points. If the other element is the
\r
178 * document it aligns it to the viewport.
\r
179 * The position parameter is optional, and can be specified in any one of the following formats:
\r
181 * <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
\r
182 * <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
\r
183 * The element being aligned will position its top-left corner (tl) to that point. <i>This method has been
\r
184 * deprecated in favor of the newer two anchor syntax below</i>.</li>
\r
185 * <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
\r
186 * element's anchor point, and the second value is used as the target's anchor point.</li>
\r
188 * In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of
\r
189 * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
\r
190 * the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than
\r
191 * that specified in order to enforce the viewport constraints.
\r
192 * Following are all of the supported anchor positions:
\r
195 ----- -----------------------------
\r
196 tl The top left corner (default)
\r
197 t The center of the top edge
\r
198 tr The top right corner
\r
199 l The center of the left edge
\r
200 c In the center of the element
\r
201 r The center of the right edge
\r
202 bl The bottom left corner
\r
203 b The center of the bottom edge
\r
204 br The bottom right corner
\r
208 // align el to other-el using the default positioning ("tl-bl", non-constrained)
\r
209 el.alignTo("other-el");
\r
211 // align the top left corner of el with the top right corner of other-el (constrained to viewport)
\r
212 el.alignTo("other-el", "tr?");
\r
214 // align the bottom right corner of el with the center left edge of other-el
\r
215 el.alignTo("other-el", "br-l?");
\r
217 // align the center of el with the bottom left corner of other-el and
\r
218 // adjust the x position by -6 pixels (and the y position by 0)
\r
219 el.alignTo("other-el", "c-bl", [-6, 0]);
\r
221 * @param {Mixed} element The element to align to.
\r
222 * @param {String} position The position to align to.
\r
223 * @param {Array} offsets (optional) Offset the positioning by [x, y]
\r
224 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
\r
225 * @return {Ext.Element} this
\r
227 alignTo : function(element, position, offsets, animate){
\r
229 return me.setXY(me.getAlignToXY(element, position, offsets),
\r
230 me.preanim && !!animate ? me.preanim(arguments, 3) : false);
\r
233 // private ==> used outside of core
\r
234 adjustForConstraints : function(xy, parent, offsets){
\r
235 return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
\r
238 // private ==> used outside of core
\r
239 getConstrainToXY : function(el, local, offsets, proposedXY){
\r
240 var os = {top:0, left:0, bottom:0, right: 0};
\r
242 return function(el, local, offsets, proposedXY){
\r
244 offsets = offsets ? Ext.applyIf(offsets, os) : os;
\r
246 var vw, vh, vx = 0, vy = 0;
\r
247 if(el.dom == document.body || el.dom == document){
\r
248 vw =Ext.lib.Dom.getViewWidth();
\r
249 vh = Ext.lib.Dom.getViewHeight();
\r
251 vw = el.dom.clientWidth;
\r
252 vh = el.dom.clientHeight;
\r
254 var vxy = el.getXY();
\r
260 var s = el.getScroll();
\r
262 vx += offsets.left + s.left;
\r
263 vy += offsets.top + s.top;
\r
265 vw -= offsets.right;
\r
266 vh -= offsets.bottom;
\r
271 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
\r
272 var x = xy[0], y = xy[1];
\r
273 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
\r
275 // only move it if it needs it
\r
278 // first validate right/bottom
\r
287 // then make sure top/left isn't negative
\r
296 return moved ? [x, y] : false;
\r
302 // el = Ext.get(el);
\r
303 // offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});
\r
307 // s = el.getScroll(),
\r
308 // vxy = el.getXY(),
\r
309 // vx = offsets.left + s.left,
\r
310 // vy = offsets.top + s.top,
\r
311 // vw = -offsets.right,
\r
312 // vh = -offsets.bottom,
\r
315 // xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),
\r
318 // w = me.dom.offsetWidth, h = me.dom.offsetHeight,
\r
319 // moved = false; // only move it if it needs it
\r
322 // if(el.dom == doc.body || el.dom == doc){
\r
323 // vw += Ext.lib.Dom.getViewWidth();
\r
324 // vh += Ext.lib.Dom.getViewHeight();
\r
326 // vw += el.dom.clientWidth;
\r
327 // vh += el.dom.clientHeight;
\r
334 // // first validate right/bottom
\r
335 // if(x + w > vx + vw){
\r
336 // x = vx + vw - w;
\r
339 // if(y + h > vy + vh){
\r
340 // y = vy + vh - h;
\r
343 // // then make sure top/left isn't negative
\r
352 // return moved ? [x, y] : false;
\r
356 * Calculates the x, y to center this element on the screen
\r
357 * @return {Array} The x, y values [x, y]
\r
359 getCenterXY : function(){
\r
360 return this.getAlignToXY(document, 'c-c');
\r
364 * Centers the Element in either the viewport, or another Element.
\r
365 * @param {Mixed} centerIn (optional) The element in which to center the element.
\r
367 center : function(centerIn){
\r
368 return this.alignTo(centerIn || document, 'c-c');
\r