我有不同的文本字段和两个按钮的形式 - 导出到Excel和导出为CSV

I have a form with various textfields and two buttons - Export to Excel and Export to CSV.

用户可提供这些值的形式不同的领域，并单击按钮中的一个。

The user can provide the values to different fields in the form and click one of the buttons.

预期的行为是一个Ajax请求应该被解雇承载领域的作为参数的值，被选中的文件（Excel中/ CSV按按钮点击）应该得到下载（我不是在提交的形式需要有做一些处理的值之前提交）。

Expected behaviour is that an Ajax request should be fired carrying the values of fields as parameters and the chosen file (Excel/CSV as per the button click) should get downloaded (I am not submitting the form as there needs to be done some processing at the values before submit).

我一直在使用下面的code在Ajax请求的下载成功的功能：

I have been using the following code in success function of Ajax request for the download:

result  =   Ext.decode(response.responseText);

try {
    Ext.destroy(Ext.get('testIframe'));
}

catch(e) {}

Ext.core.DomHelper.append(document.body, {
    tag: 'iframe',
    id:'testIframe',
    css: 'display:none;visibility:hidden;height:0px;',
    src: result.filename,
    frameBorder: 0,
    width: 0,
    height: 0
});

当在服务器实际创建的文件上面的code一直工作正常的情况下。但在我的当前项目，该文件是不是在服务器上创建，而内容被刚刚流送到适当的接头连接器的浏览器。

The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.

因此，有没有办法使用Ajax时，该文件不是present在物理服务器下载文件？我想补充，我有我需要发送到服务器，因此不能将它们都添加到iframe的src参数将一个长长的清单。

任何人都可以引导这个？

Could anyone guide at this?

感谢提前任何帮助。

推荐答案

您可以使用组件是这样的：

You may use component like this:

Ext.define('CMS.view.FileDownload', {
    extend: 'Ext.Component',
    alias: 'widget.FileDownloader',
    autoEl: {
        tag: 'iframe', 
        cls: 'x-hidden', 
        src: Ext.SSL_SECURE_URL
    },
    stateful: false,
    load: function(config){
        var e = this.getEl();
        e.dom.src = config.url + 
            (config.params ? '?' + Ext.urlEncode(config.params) : '');
        e.dom.onload = function() {
            if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
                Ext.Msg.show({
                    title: 'Attachment missing',
                    msg: 'The document you are after can not be found on the server.',
                    buttons: Ext.Msg.OK,
                    icon: Ext.MessageBox.ERROR   
                })
            }
        }
    }
});

把它放在某处视，例如：

Put it somewhere in viewport, for example:

{
    region: 'south',
    html: 'South',
    items: [
        {
            xtype: 'FileDownloader',
            id: 'FileDownloader'
        }
    ]
}

不要忘了要求它在你的视口类：

Do not forget to require it in your viewport class:

requires: [
    'CMS.view.FileDownload'
]

动作处理程序可能是这样的：

Action handler may look like this:

var downloader = Ext.getCmp('FileDownloader')
downloader.load({
    url: '/attachments/' + record.get('id') + '/' + record.get('file')
});

这是非常重要的是要有回应内容处置头，否则没有什么是下载。

It's very important to have Content-Disposition header in response, otherwise nothing is downloaded.

问候去http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 这件事情对我的作品。

Regards go to http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 This thing works for me.