sencha-touch-2 - Sencha touch 2 带插件的列表分页

Question

我有 Ext.List 项目，我想在其中应用分页，我找到了一个插件“Ext.plugin.ListPaging”。但它在我的解决方案中不起作用。我搜索了一些有关其用法的示例，发现唯一的区别是加载要存储的数据。我的情况是这样的，

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

在我的 Controller 中，商店是这样填满的，

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

分页在这种情况下不起作用，有人知道吗？

Answer 1

试试这个，它与我使用的类似并且对我有用。

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