ExtJS show "processing download" when downloading a file

Question

I have my ExtJS 4.2.1 Application, where I have a reports section for generating and downloading PDF reports.

Right now in my controller I have this for downloading a file:

onPrint: function() {


        Ext.core.DomHelper.append(document.body, {
            tag: 'iframe',
            id: 'downloadIframe',
            frameBorder: 0,
            width: 0,
            height: 0,
            css: 'display:none;visibility:hidden;height:0px;',
            src: '/api/report/GenerateReport'
        });
}

Is working fine, but there are reports that take 5 to 10 seconds to generate, so the user might click several times the Print button because he doesn't know that a file it's being generated.

How can I show a mask "processing download" or something so I block the UI until the file is downloaded.

Thanks.

score 0 · Answer 1 · answered Jul 07 '14 at 16:54

0

The parent panel that contains the Print button should have the attribute

waitMsgTarget: true,

and on the button's handler function, before you call onPrint(), add the line:

waitMsg: 'Processing download...',

Hope it helps.

answered Jul 07 '14 at 16:54

Mohammad Aftab Uddin

425
3
8

This wont work when downloading files with Iframe. Actually, Chrome has an issue with IFrame events. It won't never fire onload event. – VAAA Jul 07 '14 at 16:59
Can you share the JS code of that file? I used fpdf library and it worked just fine, if you would like to see what I did, let me know, I will share those files – Mohammad Aftab Uddin Jul 07 '14 at 17:40

score 0 · Answer 2 · answered Jul 26 '14 at 12:50

The solution that I ended with is the following:

A. Call using Ajax a server method that will generate the file but will be stored temporarily on the server. Here I show a wait message

the name of the file is a Guid.

B. Once the file is created on server I responde the client with a the file name.

C. The client on success response creates an IFrame that it's src property points to the just created file URL.

D. The file is downloaded.

ExtJS show "processing download" when downloading a file

2 Answers2