aMazing aMazing - 2 years ago 540
JSON Question

EXTJS How to display/open the PDF file that is a result of server response

How do I open/view/download the PDF file that server has returned.

I did some research but couldnt find anything that could apply in my scenario.
I have a button Print under the grid that will hit the server and the server will create a PDF file and send it back.

When I use the URL


on the browser address bar, I can successfully open the pdf file instantly. However not when I am clicking the button. I get a WARNing message which is quite obviuos:

[WARN] Unable to parse the JSON returned by the server

Here is my .Net code for creating the file.

public Stream DownloadReprintFile(string transferId, string branchId)
string fileName = GetFullReprintFilePath(transferId, branchId);
if (!File.Exists(fileName))
Reprint(transferId, branchId);

WebOperationContext.Current.OutgoingResponse.ContentType = "application/pdf";
return File.OpenRead(fileName);

Code for Store and proxy and JSON reader

Ext.define('', {
extend: '',

requires: [

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
storeId: 'PrintStore',
model: 'BranchTransferDashboard.model.PrintModel',
proxy: {
type: 'rest',
headers: {
Accept: 'application/pdf',
'Content-Type': 'application/pdf'
}, cfg)]);

Print Button click code

console.log('Print Button Click');
var printStore = Ext.getStore('PrintStore');
var url = BranchTransferDashboard.globals.url + 'branchTransfer/downloadreprintfile/'+ this.activeRecord.transferId + '/' + this.activeRecord.sender;
printStore.proxy.url = url;

scope : this,
callback: function(records, operation, success) {
if (success){


Answer Source

Following is the ExtJS code that works perfectly fine and pops open the PDF file.

//var printStore = Ext.getStore('PrintStore');
var url = MyApp.globals.url + 'myApp/downloadreprintfile/'+ this.activeRecord.transferId + '/' + this.activeRecord.sender;
//printStore.proxy.url = url;

var printPanel = Ext.create('Ext.form.Panel', {
  title:'Print Panel',
  id: 'printTabPanel',
  standardSubmit: true,
  layout: 'fit',
  timeout: 120000

             target : '_new',
             url  : url

P.S. My request is a POST request.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download