AbstractElement.position.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  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; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-dom-AbstractElement'>/**
  19. </span> * @class Ext.dom.AbstractElement
  20. */
  21. (function(){
  22. var Element = Ext.dom.AbstractElement;
  23. Element.override({
  24. <span id='Ext-dom-AbstractElement-method-getX'> /**
  25. </span> * Gets the current X position of the element based on page coordinates. Element must be part of the DOM
  26. * tree to have page coordinates (display:none or elements not appended return false).
  27. * @return {Number} The X position of the element
  28. */
  29. getX: function(el) {
  30. return this.getXY(el)[0];
  31. },
  32. <span id='Ext-dom-AbstractElement-method-getY'> /**
  33. </span> * Gets the current Y position of the element based on page coordinates. Element must be part of the DOM
  34. * tree to have page coordinates (display:none or elements not appended return false).
  35. * @return {Number} The Y position of the element
  36. */
  37. getY: function(el) {
  38. return this.getXY(el)[1];
  39. },
  40. <span id='Ext-dom-AbstractElement-method-getXY'> /**
  41. </span> * Gets the current position of the element based on page coordinates. Element must be part of the DOM
  42. * tree to have page coordinates (display:none or elements not appended return false).
  43. * @return {Array} The XY position of the element
  44. */
  45. getXY: function() {
  46. // @FEATUREDETECT
  47. var point = window.webkitConvertPointFromNodeToPage(this.dom, new WebKitPoint(0, 0));
  48. return [point.x, point.y];
  49. },
  50. <span id='Ext-dom-AbstractElement-method-getOffsetsTo'> /**
  51. </span> * Returns the offsets of this element from the passed element. Both element must be part of the DOM
  52. * tree and not have display:none to have page coordinates.
  53. * @param {Ext.Element/HTMLElement/String} element The element to get the offsets from.
  54. * @return {Array} The XY page offsets (e.g. [100, -200])
  55. */
  56. getOffsetsTo: function(el){
  57. var o = this.getXY(),
  58. e = Ext.fly(el, '_internal').getXY();
  59. return [o[0]-e[0],o[1]-e[1]];
  60. },
  61. <span id='Ext-dom-AbstractElement-method-setX'> /**
  62. </span> * Sets the X position of the element based on page coordinates. Element must be part of the DOM tree
  63. * to have page coordinates (display:none or elements not appended return false).
  64. * @param {Number} The X position of the element
  65. * @param {Boolean/Object} [animate] True for the default animation, or a standard Element
  66. * animation config object
  67. * @return {Ext.dom.AbstractElement} this
  68. */
  69. setX: function(x){
  70. return this.setXY([x, this.getY()]);
  71. },
  72. <span id='Ext-dom-AbstractElement-method-setY'> /**
  73. </span> * Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree
  74. * to have page coordinates (display:none or elements not appended return false).
  75. * @param {Number} The Y position of the element
  76. * @param {Boolean/Object} [animate] True for the default animation, or a standard Element
  77. * animation config object
  78. * @return {Ext.dom.AbstractElement} this
  79. */
  80. setY: function(y) {
  81. return this.setXY([this.getX(), y]);
  82. },
  83. <span id='Ext-dom-AbstractElement-method-setLeft'> /**
  84. </span> * Sets the element's left position directly using CSS style (instead of {@link #setX}).
  85. * @param {String} left The left CSS property value
  86. * @return {Ext.dom.AbstractElement} this
  87. */
  88. setLeft: function(left) {
  89. this.setStyle('left', Element.addUnits(left));
  90. return this;
  91. },
  92. <span id='Ext-dom-AbstractElement-method-setTop'> /**
  93. </span> * Sets the element's top position directly using CSS style (instead of {@link #setY}).
  94. * @param {String} top The top CSS property value
  95. * @return {Ext.dom.AbstractElement} this
  96. */
  97. setTop: function(top) {
  98. this.setStyle('top', Element.addUnits(top));
  99. return this;
  100. },
  101. <span id='Ext-dom-AbstractElement-method-setRight'> /**
  102. </span> * Sets the element's CSS right style.
  103. * @param {String} right The right CSS property value
  104. * @return {Ext.dom.AbstractElement} this
  105. */
  106. setRight: function(right) {
  107. this.setStyle('right', Element.addUnits(right));
  108. return this;
  109. },
  110. <span id='Ext-dom-AbstractElement-method-setBottom'> /**
  111. </span> * Sets the element's CSS bottom style.
  112. * @param {String} bottom The bottom CSS property value
  113. * @return {Ext.dom.AbstractElement} this
  114. */
  115. setBottom: function(bottom) {
  116. this.setStyle('bottom', Element.addUnits(bottom));
  117. return this;
  118. },
  119. <span id='Ext-dom-AbstractElement-method-setXY'> /**
  120. </span> * Sets the position of the element in page coordinates, regardless of how the element is positioned.
  121. * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
  122. * @param {Array} pos Contains X &amp; Y [x, y] values for new position (coordinates are page-based)
  123. * @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
  124. * @return {Ext.dom.AbstractElement} this
  125. */
  126. setXY: function(pos) {
  127. var me = this,
  128. pts,
  129. style,
  130. pt;
  131. if (arguments.length &gt; 1) {
  132. pos = [pos, arguments[1]];
  133. }
  134. // me.position();
  135. pts = me.translatePoints(pos);
  136. style = me.dom.style;
  137. for (pt in pts) {
  138. if (!pts.hasOwnProperty(pt)) {
  139. continue;
  140. }
  141. if (!isNaN(pts[pt])) {
  142. style[pt] = pts[pt] + &quot;px&quot;;
  143. }
  144. }
  145. return me;
  146. },
  147. <span id='Ext-dom-AbstractElement-method-getLeft'> /**
  148. </span> * Gets the left X coordinate
  149. * @param {Boolean} local True to get the local css position instead of page coordinate
  150. * @return {Number}
  151. */
  152. getLeft: function(local) {
  153. return parseInt(this.getStyle('left'), 10) || 0;
  154. },
  155. <span id='Ext-dom-AbstractElement-method-getRight'> /**
  156. </span> * Gets the right X coordinate of the element (element X position + element width)
  157. * @param {Boolean} local True to get the local css position instead of page coordinate
  158. * @return {Number}
  159. */
  160. getRight: function(local) {
  161. return parseInt(this.getStyle('right'), 10) || 0;
  162. },
  163. <span id='Ext-dom-AbstractElement-method-getTop'> /**
  164. </span> * Gets the top Y coordinate
  165. * @param {Boolean} local True to get the local css position instead of page coordinate
  166. * @return {Number}
  167. */
  168. getTop: function(local) {
  169. return parseInt(this.getStyle('top'), 10) || 0;
  170. },
  171. <span id='Ext-dom-AbstractElement-method-getBottom'> /**
  172. </span> * Gets the bottom Y coordinate of the element (element Y position + element height)
  173. * @param {Boolean} local True to get the local css position instead of page coordinate
  174. * @return {Number}
  175. */
  176. getBottom: function(local) {
  177. return parseInt(this.getStyle('bottom'), 10) || 0;
  178. },
  179. <span id='Ext-dom-AbstractElement-method-translatePoints'> /**
  180. </span> * Translates the passed page coordinates into left/top css values for this element
  181. * @param {Number/Array} x The page x or an array containing [x, y]
  182. * @param {Number} [y] The page y, required if x is not an array
  183. * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
  184. */
  185. translatePoints: function(x, y) {
  186. y = isNaN(x[1]) ? y : x[1];
  187. x = isNaN(x[0]) ? x : x[0];
  188. var me = this,
  189. relative = me.isStyle('position', 'relative'),
  190. o = me.getXY(),
  191. l = parseInt(me.getStyle('left'), 10),
  192. t = parseInt(me.getStyle('top'), 10);
  193. l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
  194. t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);
  195. return {left: (x - o[0] + l), top: (y - o[1] + t)};
  196. },
  197. <span id='Ext-dom-AbstractElement-method-setBox'> /**
  198. </span> * Sets the element's box. Use getBox() on another element to get a box obj.
  199. * If animate is true then width, height, x and y will be animated concurrently.
  200. * @param {Object} box The box to fill {x, y, width, height}
  201. * @param {Boolean} [adjust] Whether to adjust for box-model issues automatically
  202. * @param {Boolean/Object} [animate] true for the default animation or a standard
  203. * Element animation config object
  204. * @return {Ext.dom.AbstractElement} this
  205. */
  206. setBox: function(box) {
  207. var me = this,
  208. width = box.width,
  209. height = box.height,
  210. top = box.top,
  211. left = box.left;
  212. if (left !== undefined) {
  213. me.setLeft(left);
  214. }
  215. if (top !== undefined) {
  216. me.setTop(top);
  217. }
  218. if (width !== undefined) {
  219. me.setWidth(width);
  220. }
  221. if (height !== undefined) {
  222. me.setHeight(height);
  223. }
  224. return this;
  225. },
  226. <span id='Ext-dom-AbstractElement-method-getBox'> /**
  227. </span> * Return an object defining the area of this Element which can be passed to {@link #setBox} to
  228. * set another Element's size/location to match this element.
  229. *
  230. * @param {Boolean} [contentBox] If true a box for the content of the element is returned.
  231. * @param {Boolean} [local] If true the element's left and top are returned instead of page x/y.
  232. * @return {Object} box An object in the format:
  233. *
  234. * {
  235. * x: &lt;Element's X position&gt;,
  236. * y: &lt;Element's Y position&gt;,
  237. * width: &lt;Element's width&gt;,
  238. * height: &lt;Element's height&gt;,
  239. * bottom: &lt;Element's lower bound&gt;,
  240. * right: &lt;Element's rightmost bound&gt;
  241. * }
  242. *
  243. * The returned object may also be addressed as an Array where index 0 contains the X position
  244. * and index 1 contains the Y position. So the result may also be used for {@link #setXY}
  245. */
  246. getBox: function(contentBox, local) {
  247. var me = this,
  248. dom = me.dom,
  249. width = dom.offsetWidth,
  250. height = dom.offsetHeight,
  251. xy, box, l, r, t, b;
  252. if (!local) {
  253. xy = me.getXY();
  254. }
  255. else if (contentBox) {
  256. xy = [0,0];
  257. }
  258. else {
  259. xy = [parseInt(me.getStyle(&quot;left&quot;), 10) || 0, parseInt(me.getStyle(&quot;top&quot;), 10) || 0];
  260. }
  261. if (!contentBox) {
  262. box = {
  263. x: xy[0],
  264. y: xy[1],
  265. 0: xy[0],
  266. 1: xy[1],
  267. width: width,
  268. height: height
  269. };
  270. }
  271. else {
  272. l = me.getBorderWidth.call(me, &quot;l&quot;) + me.getPadding.call(me, &quot;l&quot;);
  273. r = me.getBorderWidth.call(me, &quot;r&quot;) + me.getPadding.call(me, &quot;r&quot;);
  274. t = me.getBorderWidth.call(me, &quot;t&quot;) + me.getPadding.call(me, &quot;t&quot;);
  275. b = me.getBorderWidth.call(me, &quot;b&quot;) + me.getPadding.call(me, &quot;b&quot;);
  276. box = {
  277. x: xy[0] + l,
  278. y: xy[1] + t,
  279. 0: xy[0] + l,
  280. 1: xy[1] + t,
  281. width: width - (l + r),
  282. height: height - (t + b)
  283. };
  284. }
  285. box.left = box.x;
  286. box.top = box.y;
  287. box.right = box.x + box.width;
  288. box.bottom = box.y + box.height;
  289. return box;
  290. },
  291. <span id='Ext-dom-AbstractElement-method-getPageBox'> /**
  292. </span> * Return an object defining the area of this Element which can be passed to {@link #setBox} to
  293. * set another Element's size/location to match this element.
  294. *
  295. * @param {Boolean} [asRegion] If true an Ext.util.Region will be returned
  296. * @return {Object} box An object in the format
  297. *
  298. * {
  299. * left: &lt;Element's X position&gt;,
  300. * top: &lt;Element's Y position&gt;,
  301. * width: &lt;Element's width&gt;,
  302. * height: &lt;Element's height&gt;,
  303. * bottom: &lt;Element's lower bound&gt;,
  304. * right: &lt;Element's rightmost bound&gt;
  305. * }
  306. *
  307. * The returned object may also be addressed as an Array where index 0 contains the X position
  308. * and index 1 contains the Y position. So the result may also be used for {@link #setXY}
  309. */
  310. getPageBox: function(getRegion) {
  311. var me = this,
  312. el = me.dom,
  313. w = el.offsetWidth,
  314. h = el.offsetHeight,
  315. xy = me.getXY(),
  316. t = xy[1],
  317. r = xy[0] + w,
  318. b = xy[1] + h,
  319. l = xy[0];
  320. if (!el) {
  321. return new Ext.util.Region();
  322. }
  323. if (getRegion) {
  324. return new Ext.util.Region(t, r, b, l);
  325. }
  326. else {
  327. return {
  328. left: l,
  329. top: t,
  330. width: w,
  331. height: h,
  332. right: r,
  333. bottom: b
  334. };
  335. }
  336. }
  337. });
  338. }());
  339. </pre>
  340. </body>
  341. </html>