docs/source/Element.position.html

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