title: Implement Sencha Touch ListPaging plugin
body: <p>I have a simple Sencha Touch contacts/users app, which shows a list and then discloses more details. </p>
  
  <p>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.</p>
  
  <p>My server returns the following:</p>
  
  <pre><code>    data: [,…]
      hasnextpage: true
      haspreviouspage: false
      pageindex: 0
      pagesize: 9999
      success: true
      totalcount: 587
      totalpages: 14
  </code></pre>
  
  <p>My Store:</p>
  
  <pre><code>     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'
          }
      });
  </code></pre>
  
  <p>And my List View:</p>
  
  <pre><code>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(
                  '&lt;tpl for="."&gt;'+                    
                      '&lt;h1&gt;{firstname:ellipsis(45)} {lastname:ellipsis(45)}&lt;/h1&gt;' +
                      '&lt;h4&gt;{grade} grade&lt;/h4&gt;' +
                  '&lt;/tpl&gt;'
          ),
          plugins: [{
              xclass: 'Ext.plugin.ListPaging',
              autoPaging: true,
              bottom: 0,
              loadMoreText: ''
          }]           
      }
  });
  </code></pre>
  
  <p>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!</p>
  
  <p><strong>EDIT : SOLVED!!</strong></p>
  
  <p>@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. </p>
  
  <p>I really hope this helps someone!! </p>
  
  <pre><code>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];
              }
          }
      }
  });
  </code></pre>
  
  <p>And I add the 'setParams' while adding the items to the store here:</p>
  
  <pre><code>        var feedStore = Ext.getStore('FeedStore');
  
          //call the setParams method that we defined in the store
          feedStore.setParams({
              token: TOKEN,
              count: 50,
              url: URL
          });
  </code></pre>