sencha list paging plugin load more

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?

John Gordon · Answer 1 · 2011-09-08 14:19:43Z

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:

How to turn off the "More" element when there are no more records to load
How to detect that there are no more records to load, and where to put that detection code.
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!

Thanks for your answer, also please let me know if anything else comes up.
item 3 in my outstanding items was a fault of my code. I had a piece of code that would force bringing the the user back to the top of the list on refresh of the data, so as to avoid another rendering error with sencha touch's list component. The bug manifests when the data replacing the list is less than what was originally there, causing the list to misrender.
Have you been able to find a solution to your first issue: "How to turn off the "More" element when there are no more records to load"?

tcghyit · Answer 2 · 2011-10-24 23:29:37Z

up vote 0 down vote

Remember also that this works only server side currently.

Forum thread http://www.sencha.com/forum/showthread.php?105193-Store-pageSize

answered Oct 24 '11 at 23:29

tcghyit
187 1 8

feedback

d_mcg · Answer 3 · 2012-03-28 05:48:49Z

I've had a similar issue with the ListPaging plugin in SenchaTouch 2, and managed to sort out the 'load more' message behaviour when the end of the data set is reached.

This builds on what John Gordon has come up with (regarding specifying the pageSize andclearOnPageLoad config options), since these properties seem to be the same in Senchatouch 2. I haven't looked at SenchaTouch 1.x in detail. In SenchaTouch 2, all config options must be defined in aconfig property:

Ext.define('MessagingApp.store.MessageThreads', {
    extend  : 'Ext.data.Store',
    requires: ['MessagingApp.model.MessageThread'],

    config:
    {
        model: 'MessagingApp.model.MessageThread',

        autoLoad: false,
        clearOnPageLoad: false,  // This is true by default
        pageSize: 10,            // This needs to be set for paging

        proxy: {
            type: 'jsonp',
            pageParam: 'currentPage',
            limitParam: 'pageSize',
            url: APIURL + '/message-app-service/GetMessageThreads',
            reader: {
                type: 'json',
                rootProperty: 'Data'
            }
        }
    }
});

In the view, where we specify the plugins, we can override the 'load more' and 'no more records' messages:

{
    xtype:'dataview',
    store:'MessageThreads',
    id:'threadList',
    itemTpl:Ext.create('Ext.XTemplate',
        '<!-- template markup goes here -->',
        {
            //custom helper functions here
        }
    ),
    plugins:[
        {
            xclass:'Ext.plugin.ListPaging',
            autoPaging: true,

            // These override the text; use CSS for styling
            loadMoreText: 'Loading...',
            noMoreRecordsText: 'All messages loaded'
        }
    ]
}

The issue is that while our web service returns an array of records for a particular page, there is no overall total count property, which is needed for the plugin to determine when all records have been loaded. Hence as it is, the 'Load more' message will remain (issue #1 in the accepted solution). So in theinit function of our controller, we have to attach an event handler for the load event on the store to hook into when a new page of data is received:

Ext.define('MessagingApp.controller.Messages',
{
    extend: 'Ext.app.Controller',

    config:
    {
        views: [
            'MessageThreads',
            // Other views referenced by this controller
        ],

        stores: [
            'MessageThreads'
        ],

        refs:
        {
            // References to UI elements by selector...
        }
    },

    init: function() {
        // Other internal initialisation...

        this.control(
        {
            // Selector-object pairs...
        });

        // Provide a means to intercept loads of each page of records
        var threadStore = Ext.getStore('MessageThreads');
        threadStore.addBeforeListener('load', this.checkForThreadListEnd, this);
    },

    // Remaining controller functions...

});

In the handler, we realise that we've reached the end of the data set when the number of records returned is less than the page size. If the total record count is a multiple of the page size, the last 'page' will have an empty array. Once the end of the data set has been identified, we update the totalCountconfig property of the store:

checkForThreadListEnd: function(store, records, isSuccessful) {
    var pageSize = store.getPageSize();
    var pageIndex = store.currentPage - 1;    // Page numbers start at 1

    if(isSuccessful && records.length < pageSize)
    {
        //Set count to disable 'loading' message
        var totalRecords = pageIndex * pageSize + records.length;
        store.setTotalCount(totalRecords);
    }
    else
        store.setTotalCount(null);
},

// Other controller functions...

Because this is a 'before' event handler, this property will be crucially updated before the plugin decides whether to display the 'load more' or 'no more records' messages. Unfortunately, the framework doesn't provide a means to hide the 'no more records' message, so this would have to be done via CSS.

Hope this helps.

Thanks for d_mcg solution. there is other issue: the "No more records" link 's still clickable and it sends a request to the server once clicked. How do you resolve this ? many thanks :)
You're welcome :-) I haven't found an easy way to disable that button, mainly because SenchaTouch only provides the means to set the text of this button in either state (which is applied via an XTemplate in the 'private'loadTpl config property). You may be able to work some magic to intercept the tap event of this button and return false (which cancels the event), or use a funky CSS selector to hide the button in its 'no more records' state. You can see the internals of how Sencha does it at docs.sencha.com
Forgot to say - you can hover over the green heading (i.e. the class name) to reveal the "View source..." link for that class. I've found that very helpful for figuring out some of the extra details that the documentation doesn't mention.

sencha list paging plugin load more

3 Answers