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

在我的控制器中，商店就像这样填充，

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

在这种情况下，分页不起作用，任何人都有任何想法？

Answer 1

尝试这个，它类似于我使用的＆amp;它对我有用。

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

Sencha touch 2 list with plugin

1 个答案: