How to get `scroll at bottom` and `scroll at top` of a list view of a Sencha Touch list view?

Question

I want to code lazy loading for the list view so that I need to add the action for my controller that fired when user scrolls down to bottom of the list and when scrolls up to the top of the list.

How can I do that using Sencha Architect?

Answer 1

I do not use Architect, but what you need is get a ref of your list in controller, and attach an handler for the scroll event of the scroller object in the initialize event of the list:

Controller

config: {
    refs: {
        list: '...',
        ...
    },
    control: {
        list: {
            initialize: 'onListInit'
        },
        ...
    },
    ...
},
onListInit: function() {
    var scroller = this.getScrollable().getScroller();
    scroller.on('scrollstart', this.onNnListScrollStart, this);
    scroller.on('scrollend',   this.onNnListScrollEnd,   this);
},
onNnListScrollStart: function(scroller, x, y) {
    console.log('START SCROLL');
},

onNnListScrollEnd: function(scroller, x, y) {
    console.log('scroll x:'+x);
    console.log('scroll y:'+y);

    var bottom = scroller.maxPosition.y;
    var top    = scroller.minPosition.y;

    var isScrollUp   = scroller.dragDirection.y === -1;
    var isScrollDown = scroller.dragDirection.y === 1;

    if (bottom === y && isScrollDown) {
        console.log('BOTTOM');    
    }

    if (top === y && isScrollUp) {
        console.log('TOP');
    }

    console.log('END SCROLL');
},
...

A Sencha Architect sample project implementing this guide can be downloaded here