I am trying to create a grid panel using ExtJS 4.1. It gets its data from the server using an AJAX proxy:

var store = Ext.create('Ext.data.Store', {
    model: 'myModel',
    pageSize: pageSize,
    proxy: {
        type: 'ajax',
        url: "../search",
        actionMethods:  {
            create: "POST",
            read: "POST",
            update: "POST",
            destroy: "POST"
        },
        headers: {
            'Content-Type': 'application/json'
        },
        limitParam: false,
        startParam: false,
        pageParam: false,
        extraParams: JSON.stringify({
            rows: pageSize,
            role: "Admin",
            index: myIndex,
            question: searchPhrase
        }),
        reader: {
            type: 'json',
            root: 'results.results',
            totalProperty: 'numFound',
            model: 'myModel'
        }
    }
});

store.loadPage(1);

but it doesn't seem to work.

I get an error message saying that the JSON could not be read. What is more, in Firebug, the sent parameters are not human readable.

When I try to make an Ajax call with the same parameters, everything seems to be OK:

Ext.Ajax.request({
    url:"../search",
    method: "POST",
    params: JSON.stringify({
        rows: pageSize,
        role: "Admin",
        index: myIndex,
        question: searchPhrase
    }),
    success: function(){
        console.log("ok");
    },
    failure: function(response, opts){
        console.log("failed");
    },
    headers: {
        'Content-Type': 'application/json'
    }
});

Even in Firebug, every parameter in the request looks just fine.

What does the framework do different when using a Proxy?

I am trying to create a grid panel using ExtJS 4.1. It gets its data from the server using an AJAX proxy:

var store = Ext.create('Ext.data.Store', {
    model: 'myModel',
    pageSize: pageSize,
    proxy: {
        type: 'ajax',
        url: "../search",
        actionMethods:  {
            create: "POST",
            read: "POST",
            update: "POST",
            destroy: "POST"
        },
        headers: {
            'Content-Type': 'application/json'
        },
        limitParam: false,
        startParam: false,
        pageParam: false,
        extraParams: JSON.stringify({
            rows: pageSize,
            role: "Admin",
            index: myIndex,
            question: searchPhrase
        }),
        reader: {
            type: 'json',
            root: 'results.results',
            totalProperty: 'numFound',
            model: 'myModel'
        }
    }
});

store.loadPage(1);

but it doesn't seem to work.

I get an error message saying that the JSON could not be read. What is more, in Firebug, the sent parameters are not human readable.

When I try to make an Ajax call with the same parameters, everything seems to be OK:

Ext.Ajax.request({
    url:"../search",
    method: "POST",
    params: JSON.stringify({
        rows: pageSize,
        role: "Admin",
        index: myIndex,
        question: searchPhrase
    }),
    success: function(){
        console.log("ok");
    },
    failure: function(response, opts){
        console.log("failed");
    },
    headers: {
        'Content-Type': 'application/json'
    }
});

Even in Firebug, every parameter in the request looks just fine.

What does the framework do different when using a Proxy?

• javascript
• extjs4.1

• There are a few things that could be checked with your first code: 1) I would try removing JSON.stringify from extraParams - it work well for me just sending an object. 2) to be on the safe side, try to include the proxy config writer: 'json'. 3) ment the headers config. – Izhaki Commented Aug 7, 2012 at 13:59
• There could also be a problem with the server response, so would be beneficial if you also include the JSON returned by the server. – Izhaki Commented Aug 7, 2012 at 13:59
• @Izhaki If I remove JSON.stringify, then I get another error(I found this method to avoid it somewhere on the internet). If I ment the headers config, then a wrong content-type is being set(again, a problem). Regarding the response, I do not think that there lies the problem, since I get a 302 status and the error(Could not read JSON) es from the server. Any other suggestions? – Dragos Commented Aug 7, 2012 at 14:27
• Well, this is odd, have a look at this (slightly modified) JsFiddle version of your code - the console shows a perfect request to the server. If I keep JSON.stringify you get a really odd request full of escaped chars (%XX). I'm sorry to say but I think the problem is server side and not ExtJS. – Izhaki Commented Aug 7, 2012 at 14:39
• @Izhaki To my mind, that is exactly my problem: using JSON.stringify on the simple Ajax call works great(the request looks as it should), but it looks awful when used with the store. Why? Removing JSON.stringify is not an option. – Dragos Commented Aug 7, 2012 at 14:49

2 Answers 2

I use the following proxy config for the store (ExtJS v6.5.2):

proxy: {
    url: 'api/search',
    paramsAsJson: true,
    actionMethods: {
        read: 'POST'
    },
    type: 'ajax',
    reader: {type: 'json'}
},

which sends the parameters as JSON:

{"page":1,"start":0,"limit":25}

It seems that it is yet another ExtJS issue.

I have found a fix here:

http://www.sencha./forum/showthread.php?196194-Ajax-Store-Send-Params-as-JSON-Body