AjaxProxy with jsonData option?

[Greendrake]

I've been using my own implementation of server-side feeders (Direct-like) for ExtJS stores for a long time since version 2, and thus I customized Store and HttpProxy in previous versions. Now I am learning the data concepts of version 4 and have started customizing AjaxProxy to get it communicate with my server-side code.
Basically, there would be just three customizations:

1. All actions, including read are requested via POST method, and
2. All requests are made to the same URL, and
3. All requests send JSON payload instead of POST fields, thus I need to use request.jsonData instead of request.params.

The inconvenience is, on order to replace params with jsonData, I have to override the whole doRequest method, where the difference is just in two lines: setting request.jsonData and deleting request.params. So, the proxy would look like this:

Ext.define('Ext.data.MyProxy', {
    extend: 'Ext.data.AjaxProxy',
    alias: 'proxy.my',
    doRequest: function(operation, callback, scope) {
        var writer  = this.getWriter(),
            request = this.buildRequest(operation, callback, scope);
            
        if (operation.allowWrite()) {
            request = writer.write(request);
        }
        
        Ext.apply(request, {
            headers       : this.headers,
            timeout       : this.timeout,
            jsonData      : request.params,
            scope         : this,
            callback      : this.createRequestCallback(request, operation, callback, scope),
            method        : this.getMethod(request),
            disableCaching: false // explicitly set it to false, ServerProxy handles caching
        });
        
        delete request.params;
        
        Ext.Ajax.request(request);
        
        return request;
    },
    constructor: function() {
        Ext.data.MyProxy.superclass.constructor.apply(this, arguments);
        this.actionMethods.read = 'POST';
    }
});

Is there any more simple and elegant solution to achieve my goals? If not, would the team consider an option for AjaxProxy that would enable sending data in JSON payload instead of HTTP fields? Thanks in advance.

[sunaku]

Thanks for posting this problem and providing your solution; it helped me make progress under a tight schedule.

Now I shall repay the favor: I was able to shorten your solution to the following by wrapping the buildRequest() function and modifying the request object therein.

var proxy = your_existing_store.getProxy();
proxy.__buildRequest__ = proxy.buildRequest;
proxy.buildRequest = function(operation) {
    var request = this.__buildRequest__(arguments);
    Ext.apply(request, {
        params: null,
        jsonData: Ext.apply(request.params, {
            page: operation.page,
            start: operation.start,
            limit: operation.limit
        })
    });
    return request;
}

Cheers.

[sunaku]

I found that ExtJS 4.1.1 lets us specify the HTTP method used to load data into a store:

        var store = Ext.create('Ext.data.Store', {
            proxy: {
                type: 'ajax',
                url: '...',
                actionMethods: {
                    read : 'POST' // use HTTP POST when making the AJAX request
                }
            }
        });

In particular, notice the actionMethods property in the example above.

[mathsaddict]

I don't see how is this fixed?!! The issue is still there! Although we can alter the method from GET to POST, we can't send a JSON payload without overriding the doRequest method! I suggest that we offer the option to the user to achieve that.

[skirtle]

See:

http://skirtlesden.com/articles/custom-proxies

The relevant example looks like this:

Ext.define('MyApp.proxy.MyAppProxy', { 
    ... 
 
    buildRequest: function(operation) { 
        var request = this.callParent(arguments); 
 
        request.jsonData = request.params; 
        request.params = {}; 
 
        return request; 
    }, 
 
    getMethod: function(request) { 
        return 'POST'; 
    } 
});

The framework has to be quite selective in allowing new config options in order to avoid bloat and conflicts. Proxies have several protected methods, like buildRequest, that are provided specifically to allow for these kind of customizations on a case-by-case basis.

I'd guess the reason Sencha hasn't added this as a formal feature is the difficulty in reconciling it with a writer.

[mathsaddict]

Thank you very much skirtle. That makes more sense actually. And yeah, your article about custom proxies is very helpful! Thanks again :-)!