Implementing paging for sencha touch list

Question

I have following sample application, where i am trying to implement paging functionality for sencha touch , but i am facing issues in setting the page size and when i hit load more same old data is being repeated in the list, please can i know where i am going wrong ?

Ext.define("WEB.view.SearchView", {
    extend: 'Ext.dataview.List',
    xtype: 'SearchView',
 requires: [
         'Ext.dataview.List',
        'Ext.data.Store',
        'Ext.List'
    ],

    config: {

    title: 'Search Results',
    plugins: [
                            {
                                xclass: 'Ext.plugin.ListPaging',
                                autoPaging: false,
                                loadMoreText: 'Loading...',
                                noMoreRecordsText: 'No More Records'
                            },
                            { xclass: 'Ext.plugin.PullRefresh' }
                        ],
        //onItemDisclosure: false,
        store: {

            id: 'MySearchStore',
             autoLoad:false,
        pageSize: 15,
        clearOnPageLoad: false,
                fields: [
                  { name: "ShortDescription", type: "string" },
                { name: "MatchId", type: "bool" }
               ],
            proxy: {
                type: 'jsonp',
                url: 'http://Example.com',
                reader: {
                    type: 'json',
                    rootProperty: 'd'
                }
            }
        },
        itemTpl: new Ext.XTemplate('<tpl if="MatchId == 1">', '<p style="color: #ff9900">{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>',
            '<tpl if="MatchId == 0">', '<p >{BlockNo}</p><p>{ShortDescription}</p>', '</tpl>'
        )
    }
});

Answer 1

This is a simple issue but can be a bottleneck when you are starting out... Set the pageParam in the store to what you use for pagination on the server side... Then everything should work fine...

Note: Your actual pagination logic should be on the server side... Sencha only provides a means to display the content a few at a time...

Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',

config: {
    storeId: 'MyJsonStore',
    proxy: {
        type: 'ajax',
        pageParam: 'page',//This parameter needs to be modified
        reader: {
            type: 'json'
        }
    }
}

});