PDA

View Full Version : JSONP Proxy / JSON Writer sends "records" parameter - breaking JSON conversion



johnmmcparland
8 Oct 2013, 10:59 PM
Hi all,

I have an ExtJS GUI on my Apache server (location http://myserver/) and a Java/Spring MVC backend on my Tomcat server (location http://myserver:8080/myapp). For this reason, I know I must use JSONP to send data between the two.

Therefore I have configured my store with a proxy as follows;



Ext.define('MyApp.store.Comments', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Comment',

requires: ['Ext.data.proxy.Proxy','Ext.data.proxy.JsonP', 'Ext.data.reader.Reader','Ext.data.writer.Writer'],

autoLoad: 'true',
autoSync: 'true',

// Example of using REST API with auto-JSON conversion.
proxy: {
type: 'jsonp',
scope: this,
api: {
// The *.action is important
read: 'http://myserver:8080/myapp/comment/view.action',
create: 'http://myserver:8080/myapp/comment/create.action',
update: 'http://myserver:8080/myapp/comment/update.action',
destroy: 'http://myserver:8080/myapp/comment/delete.action'
},
reader: {
type: 'json',
root: 'comments',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type: 'json',
root: 'comments'
},
listeners: {
exception: function(proxy, response, operation) {
Ext.MessageBox.show({
title: 'Comment error',
msg: response.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});


The model is as follows



Ext.define('MyApp.model.Comment', {
extend: 'Ext.data.Model',

fields: [
{
name: 'id',
type: 'int'
},
{
name: 'project',
type: 'string'
},
{
name: 'user',
type: 'string'
},
{
name: 'deleted',
type: 'boolean'
},
{
name: 'parentId',
type: 'int'
},
{
name: 'metric',
type: 'string'
},
{
name: 'chart',
type: 'string'
},
{
name: 'message',
type: 'string'
},
{
name: 'starred',
type: 'boolean'
},
{
name: 'field',
type: 'string'
},
{
name: 'measurementDate',
type: 'timestamp',
convert: function(args) {
// args is time in millis
var seconds = args/1000;
var datetime = Ext.Date.parse(seconds,'U');
return datetime;
}
},
{
name: 'measurementValue',
type: 'float'
},
{
name: 'commentDate',
type: 'timestamp',
convert: function(args) {
// args is time in millis
var seconds = args/1000;
var datetime = Ext.Date.parse(seconds,'U');
return datetime;
}
}
]

});


I also have a grid with an actions column, one of which is a delete button. When I click upon one of the delete buttons I see the following URL being sent in the Firebug panel;

http://myserver:8080/myapp/comment/delete.action?_dc=1381301128770&records=id=1&project=Test&user=John Smith&deleted=false&parentId=-1&metric=Metric1&chart=Chart1&message=We have too many unverified defects.&starred=true&field=Defects&measurementValue=100&measurementDate=2013-09-08T07%3A37%3A53&commentDate=2013-09-10T13%3A54%3A33&callback=Ext.data.JsonP.callback3

I do not understand why the &records=id=1 part is in the URL. I would have expected this portion to simply be &id=1.

The result is that my Java/Spring MVC controller, which uses Jackson for JSON conversion, does not create my object with the correct ID.

Is there any way to ensure that the "records" parameter is not sent?

Thanks,

John

ettavolt
10 Oct 2013, 1:12 AM
Hm! How did you manage to make Jackson parse the url?
You can try this config (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.writer.Json-cfg-encode), but I believe it will replace param name from 'records' to your root setting ('comments').
From what I see in the source code, you should get json here, not an Object.toQueryString result.

johnmmcparland
10 Oct 2013, 5:17 AM
Hm! How did you manage to make Jackson parse the url?
You can try this config (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.writer.Json-cfg-encode), but I believe it will replace param name from 'records' to your root setting ('comments').
From what I see in the source code, you should get json here, not an Object.toQueryString result.

Is it because I'm using JSONP proxy that the parameters were written on the URL (as opposed to JSON in the request body)?

Because I'm using JSONP I had to use the approach detailed here: http://jpgmr.wordpress.com/2010/07/28/tutorial-implementing-a-servlet-filter-for-jsonp-callback-with-springs-delegatingfilterproxy/
(http://jpgmr.wordpress.com/2010/07/28/tutorial-implementing-a-servlet-filter-for-jsonp-callback-with-springs-delegatingfilterproxy/)to get the decode/encode to work.

In addition, I used Loiane approach here: https://github.com/loiane/ext4-crud-mvc

I tried the "encode" config, but it made no difference.

I was able to work round it by putting an extra field in the Model - a privateId so that my real ID still gets sent down properly. But still the &records=privateId=0 is sent.