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

Question

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

localhost/HeadOffice/branchTransfer/downloadreprintfile/27500031/275

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('BranchTransferDashboard.store.PrintStore', {
    extend: 'Ext.data.Store',

    requires: [
        'BranchTransferDashboard.model.PrintModel',
        'Ext.data.proxy.Rest'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            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;
console.log(url);

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

        }
    }
});

Answer 1

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
});

printPanel.submit({
             target : '_new',
             url  : url
            });

P.S. My request is a POST request.