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