PDA

View Full Version : How to ExtJS 4.x to submit a post with json payload and return a pdf



DocAhrens
20 Sep 2012, 2:44 PM
I am using ExtJS 4.x, and need to send a request to a Tomcat server with a Spring backend using method POST with a JSON payload that returns a PDF to the browser. Using Google's Postman, I can send it successfully pasting the JSON object into the raw input and setting the content-type to application/json, and Accept to application/pdf, but cannot seem to get Ext to send it as JSON - it appears to be submitting the data like a form post. companyName="My Company", etc.


var payload = {
companyName: "My Company",
items: [{
id: "CTNT080352",
thumbnail: "/image/CTNT080352",
title: "My Title Here"
}],
reportCreatedDate: "September 20, 2012",
reportEndDate: "September 19, 2012",
reportStartDate: "September 01, 2012",
collection: {
id: "CTNT080352",
thumbnail: "/image/CTNT080352",
title: "My Items Collection",
total: 100,
count: 3,
rate: "3.0%"
},
name: "First Lastname",
userEmail: "admin@company.com"
};

Ext.Ajax.request({
url: '/webapp/report/pdf/sequence',
extraParams: printPayload,
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/pdf'
},
success: function(response){
var text = response.responseText;
},
failure: function(response){
var text = response.responseText;
}
});

crysfel
20 Sep 2012, 9:24 PM
Use the jsonData parameter instead of the extraParams :D

Regards

scottmartin
21 Sep 2012, 6:38 AM
Please be aware what jsonData will be depreciated:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json-property-jsonData

Scott.

crysfel
21 Sep 2012, 8:11 AM
Will be deprecated also in the request method of the connection class?

DocAhrens
21 Sep 2012, 11:00 AM
Please be aware what jsonData will be depreciated:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json-property-jsonData
Scott.

Thanks Scott - rawData should be listed in the configs or properties list for Ext.Ajax in the documentation - would save your customers lots of wasted time and headache

DocAhrens
25 Sep 2012, 7:07 AM
Two problems:
1. rawData does not send data as JSON, rather the browser says the payload is [object Object]
2. jsonData converts the arrays of objects to objects with keys that are strings of the indices like so:


{"key": [
{"key0": "val0"},
{"key1": "val1"},
{"key2": "val2"}
]}
[/CODE] is converted to:
[CODE]
{"key": {
"0": {"key0": "val0"},
"1": {"key1": "val1"},
"2": {"key2": "val2"}
}}


so, back to my original question...
How can I get ExtJS 4.x to submit a post with json payload to return a pdf?

scottmartin
25 Sep 2012, 7:18 AM
You can push to an array and then use Ext.encode()

example:


var myarray = [];
for (var i = 0, rec; rec = selRows[i]; i++){
myarray.push({ id: 'value' });
}
Ext.Ajax.request({
method: 'POST',
url: 'report.php',
params : {
ids: Ext.encode(myarray)
},
success: function() {
},
failure: function() {
}
});


Scott