Sencha Touch pager and Drupal Views

Having fun with Sencha Touch and Drupal Views ? Sencha provides a nice list paging plugin than makes infinite scrool list in no time.

But a problem appears when you want to plug this with Drupal views , using the Views Datasource module to output the json. Because the Sencha Touch pager will request the next page using a 1 based index, when Views use a 0 based index.

To fix this, you need to rewrite the way the Sencha Touch Proxy build its GET request :

Ext.define('path.proxy.MyProxy', {
    extend: 'Ext.data.proxy.JsonP',
    alias: 'proxy.myproxy',
    xtype : 'drupalpagerjsonp',
    config: {
        // This is the url we always query
        url: 'http://my/view/outputing/json/page',
        
        reader: {
            type: 'json',
            rootProperty: 'nodes'
        }
    },
       
     /**
     * We need to add a slight customization to buildRequest
     * We change the 1 index based page query to a zero based one
     */
    buildRequest: function(operation) {
        var request = this.callParent(arguments),
            params  = request.getParams();

        Ext.apply(params, {
            rpp: operation.getLimit(),
            page: operation.getPage() - 1
        });
        
        request.setParams(params);
        request.setUrl(this._url);

        // As we're modifiying the request params, we need to regenerate the url now
        request.setUrl(this.buildUrl(request));
        
        return request;
    }
});

And that is it !

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.