Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / Element.scroll-more.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 /**
16  * @class Ext.Element
17  */
18 Ext.Element.addMethods({
19     <div id="method-Ext.Element-scrollTo"></div>/**
20      * 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().
21      * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
22      * @param {Number} value The new scroll value
23      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
24      * @return {Element} this
25      */
26     scrollTo : function(side, value, animate) {
27         //check if we're scrolling top or left
28         var top = /top/i.test(side),
29             me = this,
30             dom = me.dom,
31             prop;
32         if (!animate || !me.anim) {
33             // just setting the value, so grab the direction
34             prop = 'scroll' + (top ? 'Top' : 'Left');
35             dom[prop] = value;
36         }
37         else {
38             // if scrolling top, we need to grab scrollLeft, if left, scrollTop
39             prop = 'scroll' + (top ? 'Left' : 'Top');
40             me.anim({scroll: {to: top ? [dom[prop], value] : [value, dom[prop]]}}, me.preanim(arguments, 2), 'scroll');
41         }
42         return me;
43     },
44     
45     <div id="method-Ext.Element-scrollIntoView"></div>/**
46      * Scrolls this element into view within the passed container.
47      * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
48      * string (id), dom node, or Ext.Element.
49      * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
50      * @return {Ext.Element} this
51      */
52     scrollIntoView : function(container, hscroll) {
53         var c = Ext.getDom(container) || Ext.getBody().dom,
54             el = this.dom,
55             o = this.getOffsetsTo(c),
56             l = o[0] + c.scrollLeft,
57             t = o[1] + c.scrollTop,
58             b = t + el.offsetHeight,
59             r = l + el.offsetWidth,
60             ch = c.clientHeight,
61             ct = parseInt(c.scrollTop, 10),
62             cl = parseInt(c.scrollLeft, 10),
63             cb = ct + ch,
64             cr = cl + c.clientWidth;
65
66         if (el.offsetHeight > ch || t < ct) {
67             c.scrollTop = t;
68         }
69         else if (b > cb) {
70             c.scrollTop = b-ch;
71         }
72         // corrects IE, other browsers will ignore
73         c.scrollTop = c.scrollTop;
74
75         if (hscroll !== false) {
76             if (el.offsetWidth > c.clientWidth || l < cl) {
77                 c.scrollLeft = l;
78             }
79             else if (r > cr) {
80                 c.scrollLeft = r - c.clientWidth;
81             }
82             c.scrollLeft = c.scrollLeft;
83         }
84         return this;
85     },
86
87     // private
88     scrollChildIntoView : function(child, hscroll) {
89         Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
90     },
91     
92     <div id="method-Ext.Element-scroll"></div>/**
93      * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
94      * within this element's scrollable range.
95      * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
96      * @param {Number} distance How far to scroll the element in pixels
97      * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
98      * @return {Boolean} Returns true if a scroll was triggered or false if the element
99      * was scrolled as far as it could go.
100      */
101      scroll : function(direction, distance, animate) {
102         if (!this.isScrollable()) {
103             return false;
104         }
105         var el = this.dom,
106             l = el.scrollLeft, t = el.scrollTop,
107             w = el.scrollWidth, h = el.scrollHeight,
108             cw = el.clientWidth, ch = el.clientHeight,
109             scrolled = false, v,
110             hash = {
111                 l: Math.min(l + distance, w-cw),
112                 r: v = Math.max(l - distance, 0),
113                 t: Math.max(t - distance, 0),
114                 b: Math.min(t + distance, h-ch)
115             };
116             hash.d = hash.b;
117             hash.u = hash.t;
118         
119         direction = direction.substr(0, 1);
120         if ((v = hash[direction]) > -1) {
121             scrolled = true;
122             this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
123         }
124         return scrolled;
125     }
126 });</pre>    
127 </body>
128 </html>