实现 Sencha Touch ListPaging 插件

Question

我有一个简单的 Sencha Touch 联系人/用户应用程序，它显示一个列表，然后披露更多详细信息。

我使用我们的 API 通过 Ext.Ajax.request 访问我的服务器以获取用户并填充列表。但是，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 个用户。非常感谢任何建议！

编辑：已解决！！

@arthurakay——你是对的，我的“令牌”肯定在某个时候被破坏了...... 由于我的 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
        });

Answer 1

您确定 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