sencha列表分页插件

我正在尝试使用 sencha touch 的列表分页插件。但几乎没有关于如何使用它的好（或坏）文档，我很困惑。

当我激活列表中的插件时

this.myList = new Ext.List({
  store: this.myStore,
  plugins: [{
    ptype: 'listpaging',
    autoPaging: false
  }],
  itemTpl: '...'
});

“加载更多”文本和加载图像将添加到列表末尾。

但我不知道如何配置我的商店以使该插件能够加载更多数据。

App.regStore('MyStore', {
 model: 'myModel',
 proxy: {
    type: 'ajax',
    url: 'http://mydomain.com/json?howmany=10&page=1',
    reader: {
        type: 'json',
        root: 'results'
    }
  }
});

App.stores.myStore = Ext.StoreMgr.get('MyStore');

如何配置我的商店，以便当我点击“加载更多”时，商店会显示第 2 页并将其自动添加到列表中？

我在 SenchaTouch 2 中的 ListPaging 插件上遇到了类似的问题，并设法在到达数据集末尾时解决“加载更多”消息行为。

这建立在约翰·戈登（John Gordon）提出的基础上（关于指定pageSize and clearOnPageLoad配置选项），因为这些属性在 Senchatouch 2 中似乎是相同的。我还没有详细研究 SenchaTouch 1.x。在 SenchaTouch 2 中，所有配置选项必须在config财产：

Ext.define('MessagingApp.store.MessageThreads', {
    extend  : 'Ext.data.Store',
    requires: ['MessagingApp.model.MessageThread'],

    config:
    {
        model: 'MessagingApp.model.MessageThread',

        autoLoad: false,
        clearOnPageLoad: false,  // This is true by default
        pageSize: 10,            // This needs to be set for paging

        proxy: {
            type: 'jsonp',
            pageParam: 'currentPage',
            limitParam: 'pageSize',
            url: APIURL + '/message-app-service/GetMessageThreads',
            reader: {
                type: 'json',
                rootProperty: 'Data'
            }
        }
    }
});

在视图中，我们指定插件，我们可以覆盖“加载更多”和“没有更多记录”消息：

{
    xtype:'dataview',
    store:'MessageThreads',
    id:'threadList',
    itemTpl:Ext.create('Ext.XTemplate',
        '<!-- template markup goes here -->',
        {
            //custom helper functions here
        }
    ),
    plugins:[
        {
            xclass:'Ext.plugin.ListPaging',
            autoPaging: true,

            // These override the text; use CSS for styling
            loadMoreText: 'Loading...',
            noMoreRecordsText: 'All messages loaded'
        }
    ]
}

问题是，虽然我们的 Web 服务返回特定页面的记录数组，但没有总体总数属性，插件需要该属性来确定何时加载所有记录。因此，“加载更多”消息将保留（已接受解决方案中的问题#1）。所以在init我们的控制器的功能，我们必须附加一个事件处理程序load当收到新的数据页面时要挂钩的存储上的事件：

Ext.define('MessagingApp.controller.Messages',
{
    extend: 'Ext.app.Controller',

    config:
    {
        views: [
            'MessageThreads',
            // Other views referenced by this controller
        ],

        stores: [
            'MessageThreads'
        ],

        refs:
        {
            // References to UI elements by selector...
        }
    },

    init: function() {
        // Other internal initialisation...

        this.control(
        {
            // Selector-object pairs...
        });

        // Provide a means to intercept loads of each page of records
        var threadStore = Ext.getStore('MessageThreads');
        threadStore.addBeforeListener('load', this.checkForThreadListEnd, this);
    },

    // Remaining controller functions...

});

在处理程序中，当返回的记录数小于页面大小时，我们意识到已经到达数据集的末尾。如果总记录数是页面大小的倍数，则最后一个“页面”将有一个空数组。一旦确定了数据集的末尾，我们就更新totalCount商店的配置属性：

checkForThreadListEnd: function(store, records, isSuccessful) {
    var pageSize = store.getPageSize();
    var pageIndex = store.currentPage - 1;    // Page numbers start at 1

    if(isSuccessful && records.length < pageSize)
    {
        //Set count to disable 'loading' message
        var totalRecords = pageIndex * pageSize + records.length;
        store.setTotalCount(totalRecords);
    }
    else
        store.setTotalCount(null);
},

// Other controller functions...

因为这是一个“之前”事件处理程序，所以在插件决定是否显示“加载更多”或“没有更多记录”消息之前，该属性将被重要更新。不幸的是，该框架没有提供隐藏“不再有记录”消息的方法，因此这必须通过 CSS 来完成。

希望这可以帮助。