CODEWITHSUNDEEP
paginationsencha-touch-2
handet87
handet87

Reputation: 549

Sencha touch 2 list paging with plugin

I have Ext.List item where i want to apply paging, i found a plugin 'Ext.plugin.ListPaging'. But it did not work in my solution. I search some examples about its usage, and i found the only difference is loading data to store. My case is like that,

Ext.define('MyApp.view.ListTemplate', {
extend: 'Ext.List',
config: {
    fullscreen: true,
    plugins: [
        {
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }
    ]},
    itemTpl: '<div class="listContainer"><div class="listItemTitle">{listItemTitle}</div><div class="elapsedTime"><tpl if="listItemDate != null">{listItemDate}</tpl></div><div class="listItemDetail"><tpl if="listItemDetail != null">{listItemDetail}</tpl></div></div>'
 });


Ext.define('MyApp.store.ListStore', {
extend: 'Ext.data.Store',
config:
{
    model: 'MyApp.model.ListData',
    proxy: {
        id: 'ListStore',
        access: 'public'
    }
}
});

And in my controller, the store is filled like that,

var myStore = Ext.getStore('ListStore');
myStore.setData(jsonData);
myStore.setPageSize(5);
myStore.sync();

Paging did not work in this case, anybody has any idea?

Upvotes: 3

Views: 3075

Answers (1)

Ram G Athreya
Ram G Athreya

Reputation: 4952

Try this it is similar to what i use & it works for me.

Ext.define('MyApp.view.ListTemplate', {
extend: 'Ext.List',
requires: [
    'Ext.plugin.ListPaging'
    ],
config: {
    fullscreen: true,
    storeId: 'ListStore',
    plugins: [
        {
            type: 'listpaging',
            autoPaging: true
        }
    ]},
    itemTpl: '<div class="listContainer"><div class="listItemTitle">{listItemTitle}</div><div class="elapsedTime"><tpl if="listItemDate != null">{listItemDate}</tpl></div><div class="listItemDetail"><tpl if="listItemDetail != null">{listItemDetail}</tpl></div></div>'
 });


Ext.define('MyApp.store.ListStore', {
extend: 'Ext.data.Store',
config:
{
    model: 'MyApp.model.ListData',
    pageSize: 5,
    storeId: 'ListStore',
    proxy: {
        id: 'ListStore',
        pageParam: 'param' //very important the parameter you use in the server side for pagination
        url: 'somesite.com' //you dont seem to have specified a url
    }
}
});

Upvotes: 3

Related Questions