Load items on demand for NestedList in Sencha Touch

Question

I am building an email-like app with Sencha Touch, and I use NestedList widget for the navigation panel.

• inbox
  • mail1
  • mail2
  • mail3
• outbox

There are maybe many mails in the inbox, so I want to load it on demand, when user scroll to the end of the list, it will load next 10 items automatically and append new items to the list.

How can I achieve this ?

Answer 1

You could try something like the following:

var loadingItems = false;

var fetchItems = function () {
    //fetch new items to add
    loadingItems = false;
};

//nestedList: reference to the nestedList
//x: new x position
//y: new y position
var scrollListener = function(nestedList, x, y) {
    //set some boundary for where we should start loading data
    var screenBottom = nestedList.getHeight() - OFFSET; 

    //if we're within some region near the bottom of the list...
    if((y >= screenBottom) && !loadingItems) {
        loadingItems = true;
        fetchItems();
    }
};
nestedList.addListener("move", scrollListener);

Answer 2

Since Sencha Touch shares alot of code with ExtJS you might get an idea of how to achieve this by looking at the various liveGrid implementations in ExtJS since that is basically what you are creating.

This is the most stable and comprehensive livegrid i've used: http://www.ext-livegrid.com/