[SOLVED] Download data from variable with a browser prompt

[DarkStarDS]

Hello, I'm trying to find a solution for 2 days now :
I want to export data from a store to a csv file. I have first tried client side.
There are only 2 ways: with data url or openning a new window and do save as. This is not perfect at all as urls in IE have a very short size compared to FF or chrome. And we can add security issues.
So now, i have written the php function to have my csv string ready to be exported. But how do I do that ?

I have a button csv export that sends an AJAX call :

new Ext.Button({
                        id: 'grid-csv-button',
                        text: 'Export to CSV',
                        iconCls: 'csv',
                        handler: function()
                        { 
                            Ext.Ajax.request({
                                url: './server.php',
                                method: 'POST',
                                params: {task: 'csv', query: reportStore.getReportInfo('name', report_id)},
                                success: function(response, opts) {
                                    //var obj = Ext.decode(response.responseText);
                                    //console.dir(obj);
                                },
                                failure: function(response, opts) {
                                    //console.log('server-side failure with status code ' + response.status);
                                }
                            });
                        }
                    })

In the PHP file, I have defined headers :

function exportToCsv()
{
    $report = getReport();
    // Required for Internet Explorer, otherwise Content-disposition is ignored
    if( ini_get('zlib.output_compression'))
    {
        ini_set('zlib.output_compression', 'Off');
    }

    header( "Pragma: public" );
    header( "Expires: 0" );
    header( "Cache-Control: must-revalidate, post-check=0, pre-check=0" );
    header( "Pragma: no-cache" );
    header( "Cache-Control: private", false ); 
    header( "Content-Type: text/csv" );
    header( "Content-Disposition: attachment; filename=\"test.csv\";" );
    header( "Content-Transfer-Encoding: binary" );
    header( "Content-Length: " . strlen( $report ) );
        
    echo $report;
} 

Nothing happens, no Save as dialog box... Help !

[BitPoet]

Ajax (i.e. the XMLHttpRequest object) won't give you a download prompt. You can either use a form with hidden fields for 'task' and 'query' and do a BasicForm.standardSubmit or pass those parameters in the url for the src of a hidden iframe.

[DarkStarDS]

Ajax is just a way to send requests to the server. Then the php script handles the prompt with the headers it sends to the browser. Am I wrong ?
And I haven't understood the solutions you propose to me. Can you be more precise with some examples ?
Thank you.

[Condor]

Simple extension:

Ext.ux.Report = Ext.extend(Ext.Component, {
    autoEl: {tag: 'iframe', cls: 'x-hidden', src: Ext.SSL_SECURE_URL},
    load: function(config){
        this.getEl().dom.src = config.url + (config.params ? '?' + Ext.urlEncode(config.params) : '');
    }
});
Ext.reg('ux.report', Ext.ux.Report);

Usage:

Add this to your layout:

{
  id: 'report',
  xtype: 'ux.report'
}

and use:

Ext.getCmp('report').load({
  url: './server.php',
  params: {
    task: 'csv',
    query: reportStore.getReportInfo('name', report_id)
  }
});

(and no, I can't add a 'loading' message, because there is no indication when it's done)

[DarkStarDS]

Thank you Condor.
I have tried this. I am sorry again, I don't really understand the code you posted. This component has an hidden iframe property that contains the data ?
I don't know where I have to put these lines :

{
  id: 'report',
  xtype: 'ux.report'
}

In my GridPanel ? In my store than contains the data ?
What is the expected result ? A Save as dialog box ?
Do I need to change something server side ? Are the headers ok ?

[Condor]

Anywhere in your layout will do.

Alternatively you could use:

var report = new Ext.ux.Report({
  renderTo: Ext.getBody()
});
...
report.load({
  url: './server.php',
  params: {
    task: 'csv',
    query: reportStore.getReportInfo('name', report_id)
  }
});

[DarkStarDS]

Ok, I've done it. When I click on the button, nothing happens. Well, nothing appears, the report's load method has been indeed triggered and has retrieved the info from the script. But no download prompt.
Can you answer my few question above please ? Thx

[Condor]

Are you sure that all your headers are correct?

The most important one has a ';' too many:

header( "Content-Disposition: attachment; filename=\"test.csv\";" );

[DarkStarDS]

No, it's not an error, I've fixed the problem and it works with the ";".
The error happened in a previous switch case in my php script. Everything is ok now, thank you !

[esparqui]

In this case, the parameters are sent by method GET. How could I send the parameters byt POST using this?

Thank.