docs/source/Element.alignment.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">/**\r
   9  * @class Ext.Element\r
  10  */\r
  11 Ext.Element.addMethods({\r
  12     <div id="method-Ext.Element-getAnchorXY"></div>/**\r
  13      * Gets the x,y coordinates specified by the anchor position on the element.\r
  14      * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo}\r
  15      * for details on supported anchor positions.\r
  16      * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead\r
  17      * of page coordinates\r
  18      * @param {Object} size (optional) An object containing the size to use for calculating anchor position\r
  19      * {width: (target width), height: (target height)} (defaults to the element's current size)\r
  20      * @return {Array} [x, y] An array containing the element's x and y coordinates\r
  21      */\r
  22     getAnchorXY : function(anchor, local, s){\r
  23         //Passing a different size is useful for pre-calculating anchors,\r
  24         //especially for anchored animations that change the el size.\r
  25                 anchor = (anchor || "tl").toLowerCase();\r
  26         s = s || {};\r
  27         \r
  28         var me = this,        \r
  29                 vp = me.dom == document.body || me.dom == document,\r
  30                 w = s.width || vp ? Ext.lib.Dom.getViewWidth() : me.getWidth(),\r
  31                 h = s.height || vp ? Ext.lib.Dom.getViewHeight() : me.getHeight(),                              \r
  32                 xy,             \r
  33                 r = Math.round,\r
  34                 o = me.getXY(),\r
  35                 scroll = me.getScroll(),\r
  36                 extraX = vp ? scroll.left : !local ? o[0] : 0,\r
  37                 extraY = vp ? scroll.top : !local ? o[1] : 0,\r
  38                 hash = {\r
  39                         c  : [r(w * 0.5), r(h * 0.5)],\r
  40                         t  : [r(w * 0.5), 0],\r
  41                         l  : [0, r(h * 0.5)],\r
  42                         r  : [w, r(h * 0.5)],\r
  43                         b  : [r(w * 0.5), h],\r
  44                         tl : [0, 0],    \r
  45                         bl : [0, h],\r
  46                         br : [w, h],\r
  47                         tr : [w, 0]\r
  48                 };\r
  49         \r
  50         xy = hash[anchor];      \r
  51         return [xy[0] + extraX, xy[1] + extraY]; \r
  52     },\r
  53 \r
  54     <div id="method-Ext.Element-anchorTo"></div>/**\r
  55      * Anchors an element to another element and realigns it when the window is resized.\r
  56      * @param {Mixed} element The element to align to.\r
  57      * @param {String} position The position to align to.\r
  58      * @param {Array} offsets (optional) Offset the positioning by [x, y]\r
  59      * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object\r
  60      * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter\r
  61      * is a number, it is used as the buffer delay (defaults to 50ms).\r
  62      * @param {Function} callback The function to call after the animation finishes\r
  63      * @return {Ext.Element} this\r
  64      */\r
  65     anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){        \r
  66             var me = this,\r
  67             dom = me.dom;\r
  68             \r
  69             function action(){\r
  70             Ext.fly(dom).alignTo(el, alignment, offsets, animate);\r
  71             Ext.callback(callback, Ext.fly(dom));\r
  72         }\r
  73         \r
  74         Ext.EventManager.onWindowResize(action, me);\r
  75         \r
  76         if(!Ext.isEmpty(monitorScroll)){\r
  77             Ext.EventManager.on(window, 'scroll', action, me,\r
  78                 {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});\r
  79         }\r
  80         action.call(me); // align immediately\r
  81         return me;\r
  82     },\r
  83 \r
  84     <div id="method-Ext.Element-getAlignToXY"></div>/**\r
  85      * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the\r
  86      * supported position values.\r
  87      * @param {Mixed} element The element to align to.\r
  88      * @param {String} position The position to align to.\r
  89      * @param {Array} offsets (optional) Offset the positioning by [x, y]\r
  90      * @return {Array} [x, y]\r
  91      */\r
  92     getAlignToXY : function(el, p, o){      \r
  93         el = Ext.get(el);\r
  94         \r
  95         if(!el || !el.dom){\r
  96             throw "Element.alignToXY with an element that doesn't exist";\r
  97         }\r
  98         \r
  99         o = o || [0,0];\r
 100         p = (p == "?" ? "tl-bl?" : (!/-/.test(p) && p !== "" ? "tl-" + p : p || "tl-bl")).toLowerCase();       \r
 101                 \r
 102         var me = this,\r
 103                 d = me.dom,\r
 104                 a1,\r
 105                 a2,\r
 106                 x,\r
 107                 y,\r
 108                 //constrain the aligned el to viewport if necessary\r
 109                 w,\r
 110                 h,\r
 111                 r,\r
 112                 dw = Ext.lib.Dom.getViewWidth() -10, // 10px of margin for ie\r
 113                 dh = Ext.lib.Dom.getViewHeight()-10, // 10px of margin for ie\r
 114                 p1y,\r
 115                 p1x,            \r
 116                 p2y,\r
 117                 p2x,\r
 118                 swapY,\r
 119                 swapX,\r
 120                 doc = document,\r
 121                 docElement = doc.documentElement,\r
 122                 docBody = doc.body,\r
 123                 scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,\r
 124                 scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,\r
 125                 c = false, //constrain to viewport\r
 126                 p1 = "", \r
 127                 p2 = "",\r
 128                 m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
 129         \r
 130         if(!m){\r
 131            throw "Element.alignTo with an invalid alignment " + p;\r
 132         }\r
 133         \r
 134         p1 = m[1]; \r
 135         p2 = m[2]; \r
 136         c = !!m[3];\r
 137 \r
 138         //Subtract the aligned el's internal xy from the target's offset xy\r
 139         //plus custom offset to get the aligned el's new offset xy\r
 140         a1 = me.getAnchorXY(p1, true);\r
 141         a2 = el.getAnchorXY(p2, false);\r
 142 \r
 143         x = a2[0] - a1[0] + o[0];\r
 144         y = a2[1] - a1[1] + o[1];\r
 145 \r
 146         if(c){    \r
 147                w = me.getWidth();\r
 148            h = me.getHeight();\r
 149            r = el.getRegion();       \r
 150            //If we are at a viewport boundary and the aligned el is anchored on a target border that is\r
 151            //perpendicular to the vp border, allow the aligned el to slide on that border,\r
 152            //otherwise swap the aligned el to the opposite border of the target.\r
 153            p1y = p1.charAt(0);\r
 154            p1x = p1.charAt(p1.length-1);\r
 155            p2y = p2.charAt(0);\r
 156            p2x = p2.charAt(p2.length-1);\r
 157            swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));\r
 158            swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));          \r
 159            \r
 160 \r
 161            if (x + w > dw + scrollX) {\r
 162                 x = swapX ? r.left-w : dw+scrollX-w;\r
 163            }\r
 164            if (x < scrollX) {\r
 165                x = swapX ? r.right : scrollX;\r
 166            }\r
 167            if (y + h > dh + scrollY) {\r
 168                 y = swapY ? r.top-h : dh+scrollY-h;\r
 169             }\r
 170            if (y < scrollY){\r
 171                y = swapY ? r.bottom : scrollY;\r
 172            }\r
 173         }\r
 174         return [x,y];\r
 175     },\r
 176 \r
 177     <div id="method-Ext.Element-alignTo"></div>/**\r
 178      * Aligns this element with another element relative to the specified anchor points. If the other element is the\r
 179      * document it aligns it to the viewport.\r
 180      * The position parameter is optional, and can be specified in any one of the following formats:\r
 181      * <ul>\r
 182      *   <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>\r
 183      *   <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.\r
 184      *       The element being aligned will position its top-left corner (tl) to that point.  <i>This method has been\r
 185      *       deprecated in favor of the newer two anchor syntax below</i>.</li>\r
 186      *   <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
 187      *       element's anchor point, and the second value is used as the target's anchor point.</li>\r
 188      * </ul>\r
 189      * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of\r
 190      * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to\r
 191      * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than\r
 192      * that specified in order to enforce the viewport constraints.\r
 193      * Following are all of the supported anchor positions:\r
 194 <pre>\r
 195 Value  Description\r
 196 -----  -----------------------------\r
 197 tl     The top left corner (default)\r
 198 t      The center of the top edge\r
 199 tr     The top right corner\r
 200 l      The center of the left edge\r
 201 c      In the center of the element\r
 202 r      The center of the right edge\r
 203 bl     The bottom left corner\r
 204 b      The center of the bottom edge\r
 205 br     The bottom right corner\r
 206 </pre>\r
 207 Example Usage:\r
 208 <pre><code>\r
 209 // align el to other-el using the default positioning ("tl-bl", non-constrained)\r
 210 el.alignTo("other-el");\r
 211 \r
 212 // align the top left corner of el with the top right corner of other-el (constrained to viewport)\r
 213 el.alignTo("other-el", "tr?");\r
 214 \r
 215 // align the bottom right corner of el with the center left edge of other-el\r
 216 el.alignTo("other-el", "br-l?");\r
 217 \r
 218 // align the center of el with the bottom left corner of other-el and\r
 219 // adjust the x position by -6 pixels (and the y position by 0)\r
 220 el.alignTo("other-el", "c-bl", [-6, 0]);\r
 221 </code></pre>\r
 222      * @param {Mixed} element The element to align to.\r
 223      * @param {String} position The position to align to.\r
 224      * @param {Array} offsets (optional) Offset the positioning by [x, y]\r
 225      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
 226      * @return {Ext.Element} this\r
 227      */\r
 228     alignTo : function(element, position, offsets, animate){\r
 229             var me = this;\r
 230         return me.setXY(me.getAlignToXY(element, position, offsets),\r
 231                                 me.preanim && !!animate ? me.preanim(arguments, 3) : false);\r
 232     },\r
 233     \r
 234     // private ==>  used outside of core\r
 235     adjustForConstraints : function(xy, parent, offsets){\r
 236         return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;\r
 237     },\r
 238 \r
 239     // private ==>  used outside of core\r
 240     getConstrainToXY : function(el, local, offsets, proposedXY){   \r
 241             var os = {top:0, left:0, bottom:0, right: 0};\r
 242 \r
 243         return function(el, local, offsets, proposedXY){\r
 244             el = Ext.get(el);\r
 245             offsets = offsets ? Ext.applyIf(offsets, os) : os;\r
 246 \r
 247             var vw, vh, vx = 0, vy = 0;\r
 248             if(el.dom == document.body || el.dom == document){\r
 249                 vw =Ext.lib.Dom.getViewWidth();\r
 250                 vh = Ext.lib.Dom.getViewHeight();\r
 251             }else{\r
 252                 vw = el.dom.clientWidth;\r
 253                 vh = el.dom.clientHeight;\r
 254                 if(!local){\r
 255                     var vxy = el.getXY();\r
 256                     vx = vxy[0];\r
 257                     vy = vxy[1];\r
 258                 }\r
 259             }\r
 260 \r
 261             var s = el.getScroll();\r
 262 \r
 263             vx += offsets.left + s.left;\r
 264             vy += offsets.top + s.top;\r
 265 \r
 266             vw -= offsets.right;\r
 267             vh -= offsets.bottom;\r
 268 \r
 269             var vr = vx+vw;\r
 270             var vb = vy+vh;\r
 271 \r
 272             var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);\r
 273             var x = xy[0], y = xy[1];\r
 274             var w = this.dom.offsetWidth, h = this.dom.offsetHeight;\r
 275 \r
 276             // only move it if it needs it\r
 277             var moved = false;\r
 278 \r
 279             // first validate right/bottom\r
 280             if((x + w) > vr){\r
 281                 x = vr - w;\r
 282                 moved = true;\r
 283             }\r
 284             if((y + h) > vb){\r
 285                 y = vb - h;\r
 286                 moved = true;\r
 287             }\r
 288             // then make sure top/left isn't negative\r
 289             if(x < vx){\r
 290                 x = vx;\r
 291                 moved = true;\r
 292             }\r
 293             if(y < vy){\r
 294                 y = vy;\r
 295                 moved = true;\r
 296             }\r
 297             return moved ? [x, y] : false;\r
 298         };\r
 299     }(),\r
 300             \r
 301             \r
 302                 \r
 303 //         el = Ext.get(el);\r
 304 //         offsets = Ext.applyIf(offsets || {}, {top : 0, left : 0, bottom : 0, right : 0});\r
 305 \r
 306 //         var  me = this,\r
 307 //              doc = document,\r
 308 //              s = el.getScroll(),\r
 309 //              vxy = el.getXY(),\r
 310 //              vx = offsets.left + s.left, \r
 311 //              vy = offsets.top + s.top,               \r
 312 //              vw = -offsets.right, \r
 313 //              vh = -offsets.bottom, \r
 314 //              vr,\r
 315 //              vb,\r
 316 //              xy = proposedXY || (!local ? me.getXY() : [me.getLeft(true), me.getTop(true)]),\r
 317 //              x = xy[0],\r
 318 //              y = xy[1],\r
 319 //              w = me.dom.offsetWidth, h = me.dom.offsetHeight,\r
 320 //              moved = false; // only move it if it needs it\r
 321 //       \r
 322 //              \r
 323 //         if(el.dom == doc.body || el.dom == doc){\r
 324 //             vw += Ext.lib.Dom.getViewWidth();\r
 325 //             vh += Ext.lib.Dom.getViewHeight();\r
 326 //         }else{\r
 327 //             vw += el.dom.clientWidth;\r
 328 //             vh += el.dom.clientHeight;\r
 329 //             if(!local){                    \r
 330 //                 vx += vxy[0];\r
 331 //                 vy += vxy[1];\r
 332 //             }\r
 333 //         }\r
 334 \r
 335 //         // first validate right/bottom\r
 336 //         if(x + w > vx + vw){\r
 337 //             x = vx + vw - w;\r
 338 //             moved = true;\r
 339 //         }\r
 340 //         if(y + h > vy + vh){\r
 341 //             y = vy + vh - h;\r
 342 //             moved = true;\r
 343 //         }\r
 344 //         // then make sure top/left isn't negative\r
 345 //         if(x < vx){\r
 346 //             x = vx;\r
 347 //             moved = true;\r
 348 //         }\r
 349 //         if(y < vy){\r
 350 //             y = vy;\r
 351 //             moved = true;\r
 352 //         }\r
 353 //         return moved ? [x, y] : false;\r
 354 //    },\r
 355     \r
 356     <div id="method-Ext.Element-getCenterXY"></div>/**\r
 357     * Calculates the x, y to center this element on the screen\r
 358     * @return {Array} The x, y values [x, y]\r
 359     */\r
 360     getCenterXY : function(){\r
 361         return this.getAlignToXY(document, 'c-c');\r
 362     },\r
 363 \r
 364     <div id="method-Ext.Element-center"></div>/**\r
 365     * Centers the Element in either the viewport, or another Element.\r
 366     * @param {Mixed} centerIn (optional) The element in which to center the element.\r
 367     */\r
 368     center : function(centerIn){\r
 369         return this.alignTo(centerIn || document, 'c-c');        \r
 370     }    \r
 371 });\r
 372 </pre>    \r
 373 </body>\r
 374 </html>