Element.scroll.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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-Element'>/**
  19. </span> * @class Ext.dom.Element
  20. */
  21. Ext.dom.Element.override({
  22. <span id='Ext-dom-Element-method-isScrollable'> /**
  23. </span> * Returns true if this element is scrollable.
  24. * @return {Boolean}
  25. */
  26. isScrollable: function() {
  27. var dom = this.dom;
  28. return dom.scrollHeight &gt; dom.clientHeight || dom.scrollWidth &gt; dom.clientWidth;
  29. },
  30. <span id='Ext-dom-Element-method-getScroll'> /**
  31. </span> * Returns the current scroll position of the element.
  32. * @return {Object} An object containing the scroll position in the format
  33. * `{left: (scrollLeft), top: (scrollTop)}`
  34. */
  35. getScroll: function() {
  36. var d = this.dom,
  37. doc = document,
  38. body = doc.body,
  39. docElement = doc.documentElement,
  40. l,
  41. t,
  42. ret;
  43. if (d == doc || d == body) {
  44. if (Ext.isIE &amp;&amp; Ext.isStrict) {
  45. l = docElement.scrollLeft;
  46. t = docElement.scrollTop;
  47. } else {
  48. l = window.pageXOffset;
  49. t = window.pageYOffset;
  50. }
  51. ret = {
  52. left: l || (body ? body.scrollLeft : 0),
  53. top : t || (body ? body.scrollTop : 0)
  54. };
  55. } else {
  56. ret = {
  57. left: d.scrollLeft,
  58. top : d.scrollTop
  59. };
  60. }
  61. return ret;
  62. },
  63. <span id='Ext-dom-Element-method-scrollBy'> /**
  64. </span> * Scrolls this element by the passed delta values, optionally animating.
  65. *
  66. * All of the following are equivalent:
  67. *
  68. * el.scrollBy(10, 10, true);
  69. * el.scrollBy([10, 10], true);
  70. * el.scrollBy({ x: 10, y: 10 }, true);
  71. *
  72. * @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
  73. * an object with &quot;x&quot; and &quot;y&quot; properties.
  74. * @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
  75. * @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
  76. * @return {Ext.Element} this
  77. */
  78. scrollBy: function(deltaX, deltaY, animate) {
  79. var me = this,
  80. dom = me.dom;
  81. // Extract args if deltas were passed as an Array.
  82. if (deltaX.length) {
  83. animate = deltaY;
  84. deltaY = deltaX[1];
  85. deltaX = deltaX[0];
  86. } else if (typeof deltaX != 'number') { // or an object
  87. animate = deltaY;
  88. deltaY = deltaX.y;
  89. deltaX = deltaX.x;
  90. }
  91. if (deltaX) {
  92. me.scrollTo('left', Math.max(Math.min(dom.scrollLeft + deltaX, dom.scrollWidth - dom.clientWidth), 0), animate);
  93. }
  94. if (deltaY) {
  95. me.scrollTo('top', Math.max(Math.min(dom.scrollTop + deltaY, dom.scrollHeight - dom.clientHeight), 0), animate);
  96. }
  97. return me;
  98. },
  99. <span id='Ext-dom-Element-method-scrollTo'> /**
  100. </span> * Scrolls this element the specified scroll point. It does NOT do bounds checking so
  101. * if you scroll to a weird value it will try to do it. For auto bounds checking, use #scroll.
  102. * @param {String} side Either &quot;left&quot; for scrollLeft values or &quot;top&quot; for scrollTop values.
  103. * @param {Number} value The new scroll value
  104. * @param {Boolean/Object} [animate] true for the default animation or a standard Element
  105. * animation config object
  106. * @return {Ext.Element} this
  107. */
  108. scrollTo: function(side, value, animate) {
  109. //check if we're scrolling top or left
  110. var top = /top/i.test(side),
  111. me = this,
  112. dom = me.dom,
  113. animCfg,
  114. prop;
  115. if (!animate || !me.anim) {
  116. // just setting the value, so grab the direction
  117. prop = 'scroll' + (top ? 'Top' : 'Left');
  118. dom[prop] = value;
  119. // corrects IE, other browsers will ignore
  120. dom[prop] = value;
  121. }
  122. else {
  123. animCfg = {
  124. to: {}
  125. };
  126. animCfg.to['scroll' + (top ? 'Top' : 'Left')] = value;
  127. if (Ext.isObject(animate)) {
  128. Ext.applyIf(animCfg, animate);
  129. }
  130. me.animate(animCfg);
  131. }
  132. return me;
  133. },
  134. <span id='Ext-dom-Element-method-scrollIntoView'> /**
  135. </span> * Scrolls this element into view within the passed container.
  136. * @param {String/HTMLElement/Ext.Element} [container=document.body] The container element
  137. * to scroll. Should be a string (id), dom node, or Ext.Element.
  138. * @param {Boolean} [hscroll=true] False to disable horizontal scroll.
  139. * @param {Boolean/Object} [animate] true for the default animation or a standard Element
  140. * animation config object
  141. * @return {Ext.dom.Element} this
  142. */
  143. scrollIntoView: function(container, hscroll, animate) {
  144. container = Ext.getDom(container) || Ext.getBody().dom;
  145. var el = this.dom,
  146. offsets = this.getOffsetsTo(container),
  147. // el's box
  148. left = offsets[0] + container.scrollLeft,
  149. top = offsets[1] + container.scrollTop,
  150. bottom = top + el.offsetHeight,
  151. right = left + el.offsetWidth,
  152. // ct's box
  153. ctClientHeight = container.clientHeight,
  154. ctScrollTop = parseInt(container.scrollTop, 10),
  155. ctScrollLeft = parseInt(container.scrollLeft, 10),
  156. ctBottom = ctScrollTop + ctClientHeight,
  157. ctRight = ctScrollLeft + container.clientWidth,
  158. newPos;
  159. if (el.offsetHeight &gt; ctClientHeight || top &lt; ctScrollTop) {
  160. newPos = top;
  161. } else if (bottom &gt; ctBottom) {
  162. newPos = bottom - ctClientHeight;
  163. }
  164. if (newPos != null) {
  165. Ext.get(container).scrollTo('top', newPos, animate);
  166. }
  167. if (hscroll !== false) {
  168. newPos = null;
  169. if (el.offsetWidth &gt; container.clientWidth || left &lt; ctScrollLeft) {
  170. newPos = left;
  171. } else if (right &gt; ctRight) {
  172. newPos = right - container.clientWidth;
  173. }
  174. if (newPos != null) {
  175. Ext.get(container).scrollTo('left', newPos, animate);
  176. }
  177. }
  178. return this;
  179. },
  180. // @private
  181. scrollChildIntoView: function(child, hscroll) {
  182. Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
  183. },
  184. <span id='Ext-dom-Element-method-scroll'> /**
  185. </span> * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
  186. * within this element's scrollable range.
  187. * @param {String} direction Possible values are:
  188. *
  189. * - `&quot;l&quot;` (or `&quot;left&quot;`)
  190. * - `&quot;r&quot;` (or `&quot;right&quot;`)
  191. * - `&quot;t&quot;` (or `&quot;top&quot;`, or `&quot;up&quot;`)
  192. * - `&quot;b&quot;` (or `&quot;bottom&quot;`, or `&quot;down&quot;`)
  193. *
  194. * @param {Number} distance How far to scroll the element in pixels
  195. * @param {Boolean/Object} [animate] true for the default animation or a standard Element
  196. * animation config object
  197. * @return {Boolean} Returns true if a scroll was triggered or false if the element
  198. * was scrolled as far as it could go.
  199. */
  200. scroll: function(direction, distance, animate) {
  201. if (!this.isScrollable()) {
  202. return false;
  203. }
  204. var el = this.dom,
  205. l = el.scrollLeft, t = el.scrollTop,
  206. w = el.scrollWidth, h = el.scrollHeight,
  207. cw = el.clientWidth, ch = el.clientHeight,
  208. scrolled = false, v,
  209. hash = {
  210. l: Math.min(l + distance, w - cw),
  211. r: v = Math.max(l - distance, 0),
  212. t: Math.max(t - distance, 0),
  213. b: Math.min(t + distance, h - ch)
  214. };
  215. hash.d = hash.b;
  216. hash.u = hash.t;
  217. direction = direction.substr(0, 1);
  218. if ((v = hash[direction]) &gt; -1) {
  219. scrolled = true;
  220. this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.anim(animate));
  221. }
  222. return scrolled;
  223. }
  224. });
  225. </pre>
  226. </body>
  227. </html>