Implementing paging for sencha touch list - html

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'
}
}
}
});