Changing format of filter parameters for a store

[jattardi]

My application talks to a web service API that expects a URL like this:

http://myserver:8080/myapp/events?group=group1&severity=warning

(This filters the events by group and by severity).

So I have a Store using an Ajax proxy, and it's set to do remote filtering. However, the resulting URL encodes the filters in JSON. So if I call:

store.filter('group', 'group1');
store.filter('severity', 'warning');
store.load();

I get a URL like this:

http://myserver:8080/myapp/events?filters=<encoded JSON>

Which the server does not understand. I took a look at the encodeFilters() method in Ext.data.proxy.Server, but that still encodes it in a single 'filters' parameter.

I did find a solution that seems to work, but feels like a hack. I'm hoping the Sencha Touch experts can guide me towards the right way to do this.

I created a new Proxy subclass that extends from Ext.data.proxy.Ajax. The best place for me to override seemed to be the buildRequest method. My strategy is that I let the parent implementation run, then remove the 'filters' parameter and add request parameters for each filter instead. Does this make sense? Is this dangerous?

Here is my code:

Ext.define('MyApp.MyCustomProxy', {
  extend: 'Ext.data.proxy.Ajax',
  alias: 'proxy.mycustom',
  
  config: {
    startParam: 'firstResult',
    limitParam: 'maxresults',
    sortParam: 'sortby',
    reader: 'json',
  },
  
  buildRequest: function(operation, callback, scope) {
    var request = this.callParent(arguments);
    var filters = request.getOperation().getFilters();
    var params = request.getParams();   
    
    // Transform filter parameters into a format the server understands
    if (filters && filters.length > 0) {
      delete params['filter'];
      
      for (var n = 0; n < filters.length; n++) {
        params[filters[n].getProperty()] = filters[n].getValue();
      }
    }
    
    return request;
  }
});