Reputation: 191
To display a PDF document with my Ext JS 4 application I use the following code (GET request):
Ext.create('Ext.window.Window', {
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
src: 'getDocument.do?id=' + myDocumentId
}
}
}).show();
Now I would like to display a PDF and it needs a complex JSON object sent by POST request to be generated.I try to send an 'ajax request' with my JSON parameter 'myJsonParameter' and display the result. Is it possible to display the request.responceText (which contains binary data of my PDF) in the window ?
Ext.Ajax.request({
url: 'getDocument.do',
jsonData: myJsonParameter,
binary: true,
success: function(response, options){
Ext.create("Ext.window.Window", {
items: {
xtype: 'component',
html: '<embed width=100% height=100%' +
' type="application/pdf"' +
' src="data:application/pdf;' +
response.responseText +
'"></embed>'
}
}).show();
}
});
I try this too; but the render display special characters and not a PDF document:
Ext.create("Ext.window.Window", {
items: {
xtype: 'component',
loader: {
url: 'getDocument.do',
autoLoad: true,
ajaxOptions: {
binary: true,
jsonData: myJsonParam,
headers: "application/pdf"
}
}
}
}).show();
Remark: I don't know if it's a good approach; any help will be very welcome.
Thanks in advance!
Best solution for the moment it's an iframe which received POST parameter (but I can't find a way to send {toto: 'abc'} in JSON format).
Ext.create('Ext.window.Window', {
items: [{
xtype: 'component',
autoEl: {tag: 'iframe', name: 'myIframe'}
},{
xtype: 'form', hidden: true,
listeners: {
afterrender: function(form){
form.getForm().doAction('standardsubmit',{
target : 'myIframe', method : 'POST',
params: {toto: 'abc'},
url : '../myPath/getDocument.do'
});
}
}
}]
}).show();
Upvotes: 1
Views: 4076
Reputation: 115
var that = this;
Ext.Ajax.request({
url: '<app url>',
timeout: 120000, // optional
scope : that,
params: {
investor_id:investor_id,
scenario_id:scenario_id,
prog_id:prog_id,
action: 'po',
operation: 'generate'
},
failure: function(response) {
//handle failure condition
},
success: function(response){
var responseObj = Ext.JSON.decode(response.responseText);
var isSuccess = responseObj.success;
var errorMsg = responseObj.errorMsg;
var url = responseObj.url;
if( isSuccess=="false" ) {
//handle failure condition
} else {
//url
var popUp = Ext.create('Ext.window.Window', {
//header:false,
height: 800,
modal:true,
width: 1024,
layout:'anchor',
anchor:"100% 100%",
title:'Proposal Output',
maximizable: true,
minimizable: true
});
popUp.add({html: '<iframe height="730", width="1000" src="'+ url +'"></iframe>'});
popUp.add({
xtype: 'button',
width: '80',
cls: 'close-button',
handler: function(){
var win = Ext.WindowManager.getActive();
if (win) {
win.close();
}
}
});
popUp.show();
}
}
});
We used below code to generate, please try.
Upvotes: 2