2

我有一个简单的 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
        });
4

1 回答 1

4

Are you sure the API docs are "sparse"?

http://docs.sencha.com/touch/2-1/#!/api/Ext.plugin.ListPaging

From the very top:

"By specifying autoPaging: true, an 'infinite scroll' effect can be achieved, i.e., the next page of content will load automatically when the user scrolls to the bottom of the list."

Also, what does security have to do with using the proxy? If you have to pass the token in each request, use the "extraParams" config on the store proxy:

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

于 2013-02-07T15:09:30.230 回答