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

@phazorRise because I am using an API method to return the data, the url I declare in the proxy will not match my application url. — jakeforaker, Feb 08 '13 at 13:11

score 4 · Accepted Answer · answered Feb 07 '13 at 15:09

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

answered Feb 07 '13 at 15:09

arthurakay

5,631
8
37
62

Thanks, that's the direction I am heading, but I'm having an issue storing my token as a global variable. I declare it in app.js as window.token and when I add the token to my extraParams, the inspector reads "undefined". Even though when I type "token" in the console, it returns the correct data. – jakeforaker Feb 07 '13 at 15:41
Perhaps the global "token" variable is getting clobbered at some point - or perhaps it needs to be JSON encoded when sending it to the server. Could be a lot of possibilities here, but without seeing the actual code it's hard to say. – arthurakay Feb 07 '13 at 16:02
Actually you can define the variable in app.js by declaring it just before `Ext.application()`. That will give you global variable which can be accessed anywhere in application BUT Global Variables are BAD (Check this out : http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use) – ThinkFloyd Feb 08 '13 at 13:34

Implement Sencha Touch ListPaging plugin

1 Answers1