docs/source/Element.scroll.html

   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-Element'>/**
  19 </span> * @class Ext.Element
  20  */
  21 Ext.override(Ext.Element, {
  22 <span id='Ext-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
  31 <span id='Ext-Element-method-getScroll'>    /**
  32 </span>     * Returns the current scroll position of the element.
  33      * @return {Object} An object containing the scroll position in the format {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
  44         if (d == doc || d == body) {
  45             if (Ext.isIE &amp;&amp; Ext.isStrict) {
  46                 l = docElement.scrollLeft;
  47                 t = docElement.scrollTop;
  48             } else {
  49                 l = window.pageXOffset;
  50                 t = window.pageYOffset;
  51             }
  52             ret = {
  53                 left: l || (body ? body.scrollLeft : 0),
  54                 top : t || (body ? body.scrollTop : 0)
  55             };
  56         } else {
  57             ret = {
  58                 left: d.scrollLeft,
  59                 top : d.scrollTop
  60             };
  61         }
  62
  63         return ret;
  64     },
  65
  66 <span id='Ext-Element-method-scrollTo'>    /**
  67 </span>     * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
  68      * @param {String} side Either &quot;left&quot; for scrollLeft values or &quot;top&quot; for scrollTop values.
  69      * @param {Number} value The new scroll value
  70      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
  71      * @return {Ext.Element} this
  72      */
  73     scrollTo : function(side, value, animate) {
  74         //check if we're scrolling top or left
  75         var top = /top/i.test(side),
  76             me = this,
  77             dom = me.dom,
  78             obj = {},
  79             prop;
  80         if (!animate || !me.anim) {
  81             // just setting the value, so grab the direction
  82             prop = 'scroll' + (top ? 'Top' : 'Left');
  83             dom[prop] = value;
  84         }
  85         else {
  86             if (!Ext.isObject(animate)) {
  87                 animate = {};
  88             }
  89             obj['scroll' + (top ? 'Top' : 'Left')] = value;
  90             me.animate(Ext.applyIf({
  91                 to: obj
  92             }, animate));
  93         }
  94         return me;
  95     },
  96
  97 <span id='Ext-Element-method-scrollIntoView'>    /**
  98 </span>     * Scrolls this element into view within the passed container.
  99      * @param {String/HTMLElement/Ext.Element} container (optional) The container element to scroll (defaults to document.body).  Should be a
 100      * string (id), dom node, or Ext.Element.
 101      * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
 102      * @return {Ext.Element} this
 103      */
 104     scrollIntoView : function(container, hscroll) {
 105         container = Ext.getDom(container) || Ext.getBody().dom;
 106         var el = this.dom,
 107             offsets = this.getOffsetsTo(container),
 108             // el's box
 109             left = offsets[0] + container.scrollLeft,
 110             top = offsets[1] + container.scrollTop,
 111             bottom = top + el.offsetHeight,
 112             right = left + el.offsetWidth,
 113             // ct's box
 114             ctClientHeight = container.clientHeight,
 115             ctScrollTop = parseInt(container.scrollTop, 10),
 116             ctScrollLeft = parseInt(container.scrollLeft, 10),
 117             ctBottom = ctScrollTop + ctClientHeight,
 118             ctRight = ctScrollLeft + container.clientWidth;
 119
 120         if (el.offsetHeight &gt; ctClientHeight || top &lt; ctScrollTop) {
 121             container.scrollTop = top;
 122         } else if (bottom &gt; ctBottom) {
 123             container.scrollTop = bottom - ctClientHeight;
 124         }
 125         // corrects IE, other browsers will ignore
 126         container.scrollTop = container.scrollTop;
 127
 128         if (hscroll !== false) {
 129             if (el.offsetWidth &gt; container.clientWidth || left &lt; ctScrollLeft) {
 130                 container.scrollLeft = left;
 131             }
 132             else if (right &gt; ctRight) {
 133                 container.scrollLeft = right - container.clientWidth;
 134             }
 135             container.scrollLeft = container.scrollLeft;
 136         }
 137         return this;
 138     },
 139
 140     // private
 141     scrollChildIntoView : function(child, hscroll) {
 142         Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
 143     },
 144
 145 <span id='Ext-Element-method-scroll'>    /**
 146 </span>     * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
 147      * within this element's scrollable range.
 148      * @param {String} direction Possible values are: &quot;l&quot; (or &quot;left&quot;), &quot;r&quot; (or &quot;right&quot;), &quot;t&quot; (or &quot;top&quot;, or &quot;up&quot;), &quot;b&quot; (or &quot;bottom&quot;, or &quot;down&quot;).
 149      * @param {Number} distance How far to scroll the element in pixels
 150      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 151      * @return {Boolean} Returns true if a scroll was triggered or false if the element
 152      * was scrolled as far as it could go.
 153      */
 154      scroll : function(direction, distance, animate) {
 155         if (!this.isScrollable()) {
 156             return false;
 157         }
 158         var el = this.dom,
 159             l = el.scrollLeft, t = el.scrollTop,
 160             w = el.scrollWidth, h = el.scrollHeight,
 161             cw = el.clientWidth, ch = el.clientHeight,
 162             scrolled = false, v,
 163             hash = {
 164                 l: Math.min(l + distance, w-cw),
 165                 r: v = Math.max(l - distance, 0),
 166                 t: Math.max(t - distance, 0),
 167                 b: Math.min(t + distance, h-ch)
 168             };
 169             hash.d = hash.b;
 170             hash.u = hash.t;
 171
 172         direction = direction.substr(0, 1);
 173         if ((v = hash[direction]) &gt; -1) {
 174             scrolled = true;
 175             this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.anim(animate));
 176         }
 177         return scrolled;
 178     }
 179 });</pre>
 180 </body>
 181 </html>