cnelissen
13 Oct 2008, 8:29 AM
Just a quick example since I didn't find anything posted on the forums, and I thought this should be something pretty standard...
Hope this helps someone.
Make sure to update your path to the EXT Library and stylesheet...
******* UPDATE 11/11/08 *******
I have released this as an extension, available at http://extjs.com/forum/showthread.php?t=52463. Its basically the same code, just simplified and in an extension form. Enjoy!
****************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Container Example</title>
<link rel="stylesheet" type="text/css" href="/scripts/ext-2.0/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript" src="/scripts/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function() {
// Create the slider element
var slider = new Ext.Slider({
renderTo: 'slider_container',
height: Ext.get('scrolling_container').getHeight(),
vertical: true,
minValue: 0 - (Ext.get('scrolling_content').getHeight() - Ext.get('scrolling_container').getHeight()), // Creates a negative value for the min, so scrolling looks correct
maxValue: 0,
value: 0,
hidden: (Ext.get('scrolling_content').getHeight() > Ext.get('scrolling_container').getHeight() ? false : true), // Hide the scrollbar if content is smaller than container
listeners: {
'drag': function() {
Ext.get('scrolling_container').scrollTo('top', slider.getValue() * -1); // Converts the negative value back to positive when we have to scroll
},
'changecomplete': function() {
Ext.get('scrolling_container').scrollTo('top', slider.getValue() * -1, true); // Converts the negative value back to positive when we have to scroll
}
}
});
});
// This was described in the forums as a fix for negative values on a slider
// This should really be fixed as part of the slider itself I should think...
// Why shouldn't it allow negative numbers?
Ext.apply(Ext.Slider.Vertical, {
onDrag: function(e){
var pos = this.innerEl.translatePoints(this.tracker.getXY());
var bottom = this.innerEl.getHeight() - pos.top;
this.setValue(this.minValue + Math.round(bottom / this.getRatio()), false);
this.fireEvent('drag', this, e);
},
onClickChange: function(local){
if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
var bottom = this.innerEl.getHeight() - local.top;
this.setValue(this.minValue + Math.round(bottom / this.getRatio()), undefined, true);
}
}
});
</script>
</head>
<body>
<div id="scrolling_container" style="float: left; height: 450px; overflow: hidden; width: 500px;">
<div id="scrolling_content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sed velit tincidunt eros vulputate consectetuer. Vivamus vulputate fringilla lacus. Cras vel ante. Sed porta dapibus ipsum. Nunc iaculis semper lorem. Duis posuere ultricies purus. Praesent et est. Sed nunc. Nam pulvinar, leo eget blandit faucibus, ligula dolor lobortis metus, ut aliquam neque felis eget velit. Maecenas egestas nisl non odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae urna. Nunc auctor, libero vitae vestibulum vulputate, nisl eros vestibulum purus, sit amet varius purus justo in est. Vestibulum sollicitudin. Praesent egestas mollis sem. Quisque massa. </p>
<p>Suspendisse nisi nibh, rhoncus et, semper sit amet, convallis id, neque. Cras fermentum. In rutrum dignissim nibh. Maecenas porttitor. Aliquam erat volutpat. Fusce laoreet tellus a nulla. Nam non nisi sed ligula fringilla hendrerit. Vestibulum ac justo ac leo euismod dapibus. Nullam quis turpis ut erat porta egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ipsum. Etiam euismod. In hac habitasse platea dictumst. </p>
<p>Vestibulum metus lorem, vestibulum quis, ultrices at, elementum et, urna. Donec volutpat lacinia risus. Sed eros. Pellentesque at dui dapibus sem elementum rhoncus. Ut dolor quam, vestibulum at, hendrerit id, bibendum vel, nulla. Ut gravida massa sed sapien. Fusce posuere dolor sed tortor. Duis lobortis aliquam nulla. Donec faucibus. Ut interdum, ipsum et dictum dictum, nunc diam porttitor risus, ac ultrices nunc enim sed metus. Praesent dui elit, pulvinar eu, condimentum sed, posuere eget, erat. Proin arcu massa, vestibulum suscipit, tempor vel, porta ut, nulla. </p>
<p>Proin accumsan augue nec risus. Mauris sit amet tellus. Sed neque nunc, posuere non, mollis in, iaculis molestie, nisi. Curabitur sed dolor. Duis purus neque, dignissim iaculis, tempus id, lacinia eu, urna. Vestibulum at nunc. Sed mollis fermentum nibh. Vivamus magna. Vivamus id ante id metus fringilla convallis. Donec id velit ac nisl pretium adipiscing. Fusce tempus, sapien eu elementum luctus, nisi ante vehicula neque, sed laoreet dui enim in risus. Integer tempus. Suspendisse potenti. Donec porttitor dictum est. Donec sem lacus, tristique eget, pretium sit amet, scelerisque sed, lectus. Ut semper, nibh et iaculis elementum, odio ligula porttitor dolor, nec euismod tellus urna non odio. Integer erat. Suspendisse gravida enim quis nibh vestibulum ullamcorper. Phasellus feugiat condimentum felis. </p>
<p>Vestibulum est nisi, hendrerit consectetuer, tincidunt nec, tristique eget, ante. Vivamus adipiscing sodales sapien. Morbi molestie massa a sem. Proin feugiat elit eu est. Nam purus risus, aliquet id, feugiat a, cursus id, turpis. Integer dignissim nibh non nisi. Vivamus lorem quam, mollis scelerisque, facilisis et, condimentum ut, augue. Fusce nec justo vel enim malesuada scelerisque. Aenean et ligula sed metus varius vestibulum. Suspendisse dictum, velit pharetra gravida interdum, massa ipsum vulputate eros, sed luctus felis magna in neque. </p>
</div>
</div>
<div id="slider_container" style="float: left; width: 15px;"></div>
</body>
</html>
*10/24/08 - Changed listener event to changecomplete to fix strange IE behavior
Hope this helps someone.
Make sure to update your path to the EXT Library and stylesheet...
******* UPDATE 11/11/08 *******
I have released this as an extension, available at http://extjs.com/forum/showthread.php?t=52463. Its basically the same code, just simplified and in an extension form. Enjoy!
****************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Container Example</title>
<link rel="stylesheet" type="text/css" href="/scripts/ext-2.0/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript" src="/scripts/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function() {
// Create the slider element
var slider = new Ext.Slider({
renderTo: 'slider_container',
height: Ext.get('scrolling_container').getHeight(),
vertical: true,
minValue: 0 - (Ext.get('scrolling_content').getHeight() - Ext.get('scrolling_container').getHeight()), // Creates a negative value for the min, so scrolling looks correct
maxValue: 0,
value: 0,
hidden: (Ext.get('scrolling_content').getHeight() > Ext.get('scrolling_container').getHeight() ? false : true), // Hide the scrollbar if content is smaller than container
listeners: {
'drag': function() {
Ext.get('scrolling_container').scrollTo('top', slider.getValue() * -1); // Converts the negative value back to positive when we have to scroll
},
'changecomplete': function() {
Ext.get('scrolling_container').scrollTo('top', slider.getValue() * -1, true); // Converts the negative value back to positive when we have to scroll
}
}
});
});
// This was described in the forums as a fix for negative values on a slider
// This should really be fixed as part of the slider itself I should think...
// Why shouldn't it allow negative numbers?
Ext.apply(Ext.Slider.Vertical, {
onDrag: function(e){
var pos = this.innerEl.translatePoints(this.tracker.getXY());
var bottom = this.innerEl.getHeight() - pos.top;
this.setValue(this.minValue + Math.round(bottom / this.getRatio()), false);
this.fireEvent('drag', this, e);
},
onClickChange: function(local){
if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
var bottom = this.innerEl.getHeight() - local.top;
this.setValue(this.minValue + Math.round(bottom / this.getRatio()), undefined, true);
}
}
});
</script>
</head>
<body>
<div id="scrolling_container" style="float: left; height: 450px; overflow: hidden; width: 500px;">
<div id="scrolling_content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sed velit tincidunt eros vulputate consectetuer. Vivamus vulputate fringilla lacus. Cras vel ante. Sed porta dapibus ipsum. Nunc iaculis semper lorem. Duis posuere ultricies purus. Praesent et est. Sed nunc. Nam pulvinar, leo eget blandit faucibus, ligula dolor lobortis metus, ut aliquam neque felis eget velit. Maecenas egestas nisl non odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae urna. Nunc auctor, libero vitae vestibulum vulputate, nisl eros vestibulum purus, sit amet varius purus justo in est. Vestibulum sollicitudin. Praesent egestas mollis sem. Quisque massa. </p>
<p>Suspendisse nisi nibh, rhoncus et, semper sit amet, convallis id, neque. Cras fermentum. In rutrum dignissim nibh. Maecenas porttitor. Aliquam erat volutpat. Fusce laoreet tellus a nulla. Nam non nisi sed ligula fringilla hendrerit. Vestibulum ac justo ac leo euismod dapibus. Nullam quis turpis ut erat porta egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ipsum. Etiam euismod. In hac habitasse platea dictumst. </p>
<p>Vestibulum metus lorem, vestibulum quis, ultrices at, elementum et, urna. Donec volutpat lacinia risus. Sed eros. Pellentesque at dui dapibus sem elementum rhoncus. Ut dolor quam, vestibulum at, hendrerit id, bibendum vel, nulla. Ut gravida massa sed sapien. Fusce posuere dolor sed tortor. Duis lobortis aliquam nulla. Donec faucibus. Ut interdum, ipsum et dictum dictum, nunc diam porttitor risus, ac ultrices nunc enim sed metus. Praesent dui elit, pulvinar eu, condimentum sed, posuere eget, erat. Proin arcu massa, vestibulum suscipit, tempor vel, porta ut, nulla. </p>
<p>Proin accumsan augue nec risus. Mauris sit amet tellus. Sed neque nunc, posuere non, mollis in, iaculis molestie, nisi. Curabitur sed dolor. Duis purus neque, dignissim iaculis, tempus id, lacinia eu, urna. Vestibulum at nunc. Sed mollis fermentum nibh. Vivamus magna. Vivamus id ante id metus fringilla convallis. Donec id velit ac nisl pretium adipiscing. Fusce tempus, sapien eu elementum luctus, nisi ante vehicula neque, sed laoreet dui enim in risus. Integer tempus. Suspendisse potenti. Donec porttitor dictum est. Donec sem lacus, tristique eget, pretium sit amet, scelerisque sed, lectus. Ut semper, nibh et iaculis elementum, odio ligula porttitor dolor, nec euismod tellus urna non odio. Integer erat. Suspendisse gravida enim quis nibh vestibulum ullamcorper. Phasellus feugiat condimentum felis. </p>
<p>Vestibulum est nisi, hendrerit consectetuer, tincidunt nec, tristique eget, ante. Vivamus adipiscing sodales sapien. Morbi molestie massa a sem. Proin feugiat elit eu est. Nam purus risus, aliquet id, feugiat a, cursus id, turpis. Integer dignissim nibh non nisi. Vivamus lorem quam, mollis scelerisque, facilisis et, condimentum ut, augue. Fusce nec justo vel enim malesuada scelerisque. Aenean et ligula sed metus varius vestibulum. Suspendisse dictum, velit pharetra gravida interdum, massa ipsum vulputate eros, sed luctus felis magna in neque. </p>
</div>
</div>
<div id="slider_container" style="float: left; width: 15px;"></div>
</body>
</html>
*10/24/08 - Changed listener event to changecomplete to fix strange IE behavior