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，可以实现'无限滚动'效果，即当用户滚动到列表底部时，下一页内容将自动加载。” < / p>

此外，安全性与使用代理有什么关系？如果您必须在每个请求中传递令牌，请使用商店代理上的“extraParams”配置：

http://docs.sencha.com/touch/2-1/#!/api/Ext.data.proxy.Ajax-cfg-extraParams

实施Sencha Touch ListPaging插件

1 个答案: