Implement Sencha Touch ListPaging plugin

Question

I have a simple Sencha Touch contacts/users app, which shows a list and then discloses more details.

I reach my server with Ext.Ajax.request using our API to fetch the users and populate the list. However, the totalcount is usually above 500, so I need to implement the ListPaging plugin. For security reasons, I am pretty sure I cannot do the "proxy" method (because I have to use a "token" for authenticating requests). Maybe I am wrong; documentation is sparse, so I need a boost.

My server returns the following:

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

My Store:

     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'
        }
    });

And my List View:

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: ''
        }]           
    }
});

I would like to utilize the ListPaging plugin to autoload the next 45 users when the screen is scrolled to the bottom. Any advice is greatly appreciated!

EDIT : SOLVED!!

@arthurakay -- you were right, my "token" was definitely getting clobbered up at some point.. Since my API requires a token for every request, I was able to create a "beforeload" function in which I set my proxy, with the token I received on login -- before the ListPaging needs to be called. So, by the time the user is ready to scroll and activate ListPaging, my token is stored with the first record I received from the server, and magically adds 50 more records each time the user scrolls to the bottom.

I really hope this helps someone!!

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];
            }
        }
    }
});

And I add the 'setParams' while adding the items to the store here:

        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

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, ie, 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