javascript - 实现Sencha Touch ListPaging插件

我有一个简单的Sencha Touch联系人/用户应用程序，它显示一个列表，然后透露更多细节。
我通过Ext.Ajax.request到达服务器，使用我们的API获取用户并填充列表。但是，totalcount通常高于500，所以我需要实现ListPaging插件。出于安全原因，我非常确定我不能使用“代理”方法（因为我必须使用“令牌”来验证请求）。也许我错了；文档很少，所以我需要一个增强。
我的服务器返回以下信息：

    data: [,…]
    hasnextpage: true
    haspreviouspage: false
    pageindex: 0
    pagesize: 9999
    success: true
    totalcount: 587
    totalpages: 14

我的商店：

     Ext.define('MyApp.store.StudentStore',{
        extend: 'Ext.data.Store',
        config:{
           storeId: 'Students',
           model:'MyApp.model.people',
           autoLoad:false,
           remoteFilter:true,      //just trying stuff I've read about
           sortOnFilter:true,
           clearOnPageLoad: false,
           grouper: {
                 groupFn: function(record) {
                   return record.get('lastname')[0];
                 }
           },
           sorters: 'lastname'
        }
    });

我的列表视图：

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.dataview.List',
    alias : 'widget.mainPanel',
    requires: [
        'MyApp.store.StudentStore',
        'Ext.plugin.ListPaging'
    ],

    config: {
        store : 'Students',
        model: 'people',
        grouped:true,
        sorters: 'lastname',
        itemTpl: new Ext.XTemplate(
                '<tpl for=".">'+
                    '<h1>{firstname:ellipsis(45)} {lastname:ellipsis(45)}</h1>' +
                    '<h4>{grade} grade</h4>' +
                '</tpl>'
        ),
        plugins: [{
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true,
            bottom: 0,
            loadMoreText: ''
        }]
    }
});

我想利用ListPaging插件在屏幕滚动到底部时自动加载接下来的45个用户。任何建议都非常感谢！
编辑：解决了！!
@阿尔瑟拉凯——你说得对，我的“代币”在某个时候肯定被打得落花流水。。
由于我的API对每个请求都需要一个令牌，所以我能够创建一个“beforeload”函数，在需要调用ListPaging之前，我在其中使用登录时收到的令牌设置代理。因此，当用户准备滚动并激活ListPaging时，我的令牌将与我从服务器接收到的第一条记录一起存储，并且在用户滚动到底部时神奇地添加50条记录。
我真的希望这能帮助别人！!

Ext.define('MyApp.store.PersonStore',{
    extend: 'Ext.data.Store',
    config:{
        storeId: 'Persons',
        model:'MyApp.model.PersonModel',
        autoLoad:false,
        clearOnPageLoad: true,

        listeners: {
            beforeload: function(store){

                store.setProxy({
                    headers: {
                        Accept : 'application/json',
                        Authorization : 'Bearer:' + this.token
                    },
                    type: 'ajax',
                    pageParam: 'pageindex',
                    url: this.url,
                    extraParams: {
                        count: this.count
                    },
                    reader: {
                        type: 'json',
                        rootProperty:'data',
                        pageParam: 'pageindex',
                        totalProperty: 'totalcount'
                    }
                });
            }
        },

        grouper: {
            groupFn: function(record) {
                return record.data.lastname[0]
            }
        },
        sorters: 'lastname'
    },

    setParams: function(params){
        for (var prop in params){
            if (params.hasOwnProperty(prop)){
                this[prop] = params[prop];
            }
        }
    }
});

我在这里添加商品时添加了“setParams”：

        var feedStore = Ext.getStore('FeedStore');

        //call the setParams method that we defined in the store
        feedStore.setParams({
            token: TOKEN,
            count: 50,
            url: URL
        });

最佳答案

你确定API文档是“稀疏”的吗？
http://docs.sencha.com/touch/2-1/#!/api/Ext.plugin.ListPaging
从最上面看：
通过指定autoPaging:true，可以实现“无限滚动”效果，即当用户滚动到列表底部时，将自动加载下一页内容
另外，安全性与使用代理有什么关系？如果必须在每个请求中传递令牌，请在存储代理上使用“extraParams”配置：
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.proxy.Ajax-cfg-extraParams

关于javascript - 实现Sencha Touch ListPaging插件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14750337/