How can I prevent Ext JS from including an entity body in DELETE requests using a restful store?

Question

When Ext JS issues a DELETE request from a restful store, it includes an entity body. Although this doesn't seem to be forbidden by the HTTP spec, Google App Engine doesn't accept such requests. So I'd like to know if there is a way to prevent a restful store from including a redundant entity body on DELETE requests.

Details:

Using this sample as reference: http://www.sencha.com/deploy/dev/examples/restful/restful.html

This is how the store is defined:

var store = new Ext.data.Store({
    id: 'user',
    restful: true,     // <-- This Store is RESTful
    proxy: proxy,
    reader: reader,
    writer: writer
});

After pressing the "Delete" button, this is the request Ext JS sends:

DELETE http://www.sencha.com/deploy/dev/examples/restful/app.php/users/6 HTTP/1.1
Host: www.sencha.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; pt-BR; rv:1.9.2.4) Gecko/20100611 Firefox/3.6.4 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/json; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://www.sencha.com/deploy/dev/examples/restful/restful.html
Content-Length: 10
Cookie: bb_sessionhash=8d75f5e42d576fb695a02bf1d24c9ff1; etc...

{"data":6}

When a request in this format (with the "data" content) is submitted to Google App Engine, it replies with:

400 Bad Request

Barmecide

Related: #33153900 – Mossbunker

Answer 1

You can fix this problem, as you guessed, by overriding a method in the HttpProxy class. First, add this code:

// Special HttpProxy that sends no body on DELETE requests
Ext.data.GAEHttpProxy = Ext.extend(Ext.data.HttpProxy, {
doRequest: function(action, rs, params, reader, cb, scope, arg) {
    if(this.api[action]['method'].toLowerCase() == "delete") {
        delete params.jsonData;
    }

    Ext.data.GAEHttpProxy.superclass.doRequest.call(this, action, rs, params, reader, cb, scope, arg);
}
});

Then, use this new class ("GAEHttpProxy") instead of HttpProxy in the rest of your code (for instance, when you create the proxy you use in your store shown above). This worked for me, and I hope it works for you!

Crinkleroot

Awesome, that indeed works. I tested it on App Engine. Thank you very much, you not only posted clean code that solved the issue, but demonstrated how to customize the proxy. Nice job. – Barmecide

This doesn't seem to apply to ExtJS 4. doRequest has operation, callback, scope parameters now. – Soporific

@Soporific Also couldn't apply this answer to Ext JS 4, so posted it as a separate question: #33153900 Finally found a workaround by using Ajax interceptor, it works regardless of the framework used. – Mossbunker

Answer 2

Although the question is asked 7 years ago and we have sencha 6 now, the problem isn't solved OOTB yet. So here is my working solution:

Ext.define('My.Proxy', {
    extend: 'Ext.data.proxy.Rest',
    writer: {
        type: 'json',
        writeAllFields: true, // may be false, as you wish
        transform: {
            fn: function(data, request) {
                return request.config.action === 'destroy' ? null : data;
            },
            scope: this
        }
    }
});

We could also do this check: request.config.method === 'DELETE' but for some reason it always returns false. So I recommend to stay with action === 'destroy'

Saleh