Ext.Ajax.request callbacks never called when isUpload is true

Question

I'm using ExtJS to make a form that generates a report from the data in the database in CSV format. After the user chooses a simple range of dates to extract the data and submits, running the following code :

var frm = document.createElement('form');
frm.id = 'frmDummy';
frm.name = id;
document.body.appendChild(frm);

Ext.MessageBox.wait('Generating CSV File ...');

Ext.Ajax.request({
    url: 'csv_extract_ajax.php?start_time='+txtDateFieldFrom.getRawValue()+'&end_time='+txtDateFieldTo.getRawValue(),

    method : 'POST',

    form: Ext.fly('frmDummy'),

    isUpload: true, 

    success: function(o, r, n){

        Ext.MessageBox.updateProgress(1);
        Ext.MessageBox.hide();
    },

    failure: function(o, r, n){

        Ext.MessageBox.updateProgress(1);
        Ext.MessageBox.hide();
    },

    callback: function(o, r, n){

        Ext.MessageBox.updateProgress(1);
        Ext.MessageBox.hide();
    },     

    scope: this
});

The associated php file simple outputs a CSV string, working file.

Since the isUpload is true, it seems that the callback is never returned to the user. As soon as I remove it, the callback is called but the file is not uploaded to the client.

The problem now, everything is working perfectly but the MessageBox never disappears since the callbacks are never called (success, failure or callback)

Any idea ? :P

Additional info:

PHP header :

header("Pragma: public");
header("Expires: 0");
header("Cache-Control: private");
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=$filename");
header("Accept-Ranges: bytes");

Answer 1

This is an excerpt from Ext.Ajax.request documentation:

isUpload : Boolean (Optional) True if the form object is a file upload (will usually be automatically detected). File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM element temporarily modified to have its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered. The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body. The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks. Be aware that file upload packets are sent with the content type multipart/form and some server technologies (notably Java EE) may require some custom processing in order to retrieve parameter names and parameter values from the packet content.

As you can see, upload request is returned via IFRAME and only emulates standard AJAX response, so that callbacks are not called.

Answer 2

Try changing:

l: 'csv_extract_ajax.php?start_time='+txtDateFieldFrom.getRawValue()+'&end_time='+txtDateFieldTo.getRawValue(),

to

l: 'csv_extract_ajax.php?'+ Ext.urlEncode({ start_time: txtDateFieldFrom.getRawValue(), end_time: txtDateFieldTo.getRawValue() }),