Ext JS 4: Load a Data Store using JSON params

Update 12/5/2012: Recently came across Skirtle’s excellent write up about custom proxies and I realized that my JSON Ajax proxy was overly complicated. Now it is simplified and results in less overriding of the code.

In Ext JS 4.1, when you have a store configured to use an proxy and you call store.load(), the request is a GET request with your params url encoded. I’ve managed to work w/this so far, but I now have a case where my params are getting much more involved (nested objects) and JSON is a better fit. Currently there is no way to indicate to the proxy “do this as a POST request, w/JSON”, like you can when calling Ext.Ajax.request directly (just use the jsonData parameter).

After much searching and Ext JS 4.1 source debugging, I extended the proxy and created one that will post the params as JSON.

The code is in gist 3370841.

I’m currently starting to really use this, so I’ll update if I find any issues, but basically it just puts your params into the jsonData property, so that when Ext.Ajax.request gets called, it does the right thing. It also says that “reads” are “POST”s, not “GET”s. The encode sorters/filters stuff is overridden to make sure that sorters and filters do not get JSON encoded twice. I’m not using full CRUD on my store, but I think it should all work.

To use it, just use this “jsonajax” as your proxy. Here’s a store config. It uses the new proxy and also has remote sorting and paging.

	xtype: 'store',
	storeId: 'myStore',
	model: 'My.Model',
	pageSize: 25,
	remoteSort: true,
	proxy: {
		type: 'jsonajax',
		url : 'my/url/here,
		reader: {
			type: 'json',
			root: 'rows',
			totalProperty: 'total',
			messageProperty: 'message'

Helpful links:

Version Info: Ext JS 4.1.1