Question

I’m trying to use sencha touch’s listpaging plugin. But there is almost no good( or bad ) documentation about how to use it and i’m confused.

When i activate the plugin in my list

this.myList = new Ext.List({
  store: this.myStore,
  plugins: [{
    ptype: 'listpaging',
    autoPaging: false
  }],
  itemTpl: '...'
});

a ‘Load More’ text and a loading image is added to the end of the list.

But i don’t know how to configure my store to enable this plugin to be able to load more data.

App.regStore('MyStore', {
 model: 'myModel',
 proxy: {
    type: 'ajax',
    url: 'http://mydomain.com/json?howmany=10&page=1',
    reader: {
        type: 'json',
        root: 'results'
    }
  }
});

App.stores.myStore = Ext.StoreMgr.get('MyStore');

How can i configure my store so when i tap “Load more”, the store brings up page 2 and add them to the list automatically?

Answer 1

I’m having problems finding good documentation, too, but I can at least answer your question. You need to add pageSize to your store, clearOnPageLoad as well, if you want to not clear out what was already loaded. Her’s my code:

Ext.regStore('publicresources', {

model: 'PublicResource',
autoLoad:false,
remoteFilter:true,
sortOnFilter:true,
    pageSize: 15,
    clearOnPageLoad: false, 
sorters: [
    {
        property : 'distance',
        direction: 'ASC'
    }
]

});

My outstanding issues that I’m looking into are:

1. How to turn off the “More” element when there are no more records to load
2. How to detect that there are no more records to load, and where to put that detection code.
3. How to keep the list at the location that the user was at. Each load jumps back to the 1st item in the list

Good luck!