Question

I have a small query with regards to Sencha Touch. i am trying to program some code which has an event kickstart as you scroll down the main panel (The end ideal experiment I am trying to achieve is to get the Panel to render images as you scroll down, but at the moment I am settling for just firing off a console.log from a function).

I was wondering if anyone knew of a method which would the program to detect how far down someone has scrolled vertically and fire off an event once you reach a certain y coordinate. I know of the scrollTo event, but I cannot seem to find any events which allow me to detect the x and y coordinate.

The basic coding for my panel is as follows:

headlinepanel = new Ext.Panel(
{
    layout:
    {   
        type:'vbox',
        align:'stretch'
    },
    monitorOrientation: true,
    scroll:
    {
        direction: 'vertical',
        bounces: false,
        outOfBoundRestrictFactor : 0,
        threshold:20,
    },  
    style: 'background-color:black;',
    listeners: 
    {
        afterrender: function()
        {
            if(headlinepanel.scroller.offsetBoundary.bottom == 500)
            {
                console.log("You are here!");
            }
        }
    }
});

This is what I have at the moment and I tried to see if I could get the offsetBoundary property to work, but none of my programming friends has tried something like this before, so I am not very familar with this. I would appriciate any help, but I understand if this is not really possible with Sencha. Thank you for reading this.

Answer 1

This is how you listen for scroll events:

headlinepanel.scroller.on('scroll',function(me,offset){
        console.log(offset.x);
        console.log(offset.y);
    });

This event is fire on every change, there are other events too. Check the API here: http://docs.sencha.com/touch/1-1/#!/api/Ext.util.Scroller-event-scroll

And here is an example: http://jsfiddle.net/sSyqF/14/