View Full Version : Container scroll bar listener, reach bottom

11 Oct 2013, 3:10 PM
I've been researching this for a few hours now, and although I've found a number of scrollbar listeners for grid scrollbars, I've found nothing about listening to a container scrollbar. Though I feel they should be similar. Either way, I've had no luck getting a listener to fire a scroll event.

I need to listen to a scrollbar which is rendered into a container through the autoScroll config. Therefor the scrollbar is only being added since the html content inside the container is longer than the size of the container(not sure if this has or does not have an effect on the listeners that get included for the container when its created).

The event I need to listen for is when the scrollbar reaches the bottom. This is for a Terms of Use window, when the scrollbar reaches the bottom, I need to insert another panel with some fields for log in and an accept terms button.

I found this code sample that listens to a grid and seems to listen for the exact event I need. This doesn't work in my container for reasons I'm unaware of, other than the fact that its not a grid, and I guess containers don't have a bodyScroll event? And if it did, I would have to change the selectors.

var grid = {
xtype: 'grid',
listeners: {
bodyScroll: function(scrollLeft, scrollTop) {
var el = this.getEl();
var scroller = el.child('.x-grid3-scroller')
var insider = scroller.child('.x-grid3-body')
if(insider.getHeight() == scrollTop + scroller.getHeight()) {
console.log('You have reached the bottom')
Found in post http://www.sencha.com/forum/showthread.php?269514

(http://www.sencha.com/forum/showthread.php?269514)If anyone can explain to me how to get this kind of a listener for a container scrollbar that would be great. Or maybe I'll have to implement it another way altogether.

Thanks in advance for your help!


11 Oct 2013, 4:03 PM

listeners: {
afterrender: function(container,eOpts) {
container.getEl().on('scroll', function() {

The scroll event is one of three events contained inside eOpts.

The scroll event is firing. I can see light at the end of the tunnel.

I still don't understand why I have to listen for the afterrender event in order for the scroll listener to be available?

I'm I correct in thinking that the eOpts argument are the listeners that are added to the component after that event has fired?


14 Oct 2013, 2:12 AM
1. Because container does not relay this event from dom to component. And even more - no component relays plain dom events, but may fire some events, that originate from dom.
2. No, this is the object you have passed as 'listeners' config.