Add a new class to download file pressing a button.

static/plugin_dbui/src/appbuttondownload.js

+/**
+ * A button to download file from the server
+ * 
+ * @extends Ext.Button
+ * @version $Id$
+ *
+ */
+
+Ext.namespace('App');
+
+App.ButtonDownload = Ext.extend(Ext.Button, {
+
+    /**
+     * @cfg{String} url  pointing to the server controller  
+     * which will return the file
+     */    
+    url: undefined,
+    
+     /**
+     * private method requests by the component model of ExtJS
+     */
+    initComponent: function () {
+        
+        // initialize the underlying class
+        App.ButtonDownload.superclass.initComponent.call(this);
+        
+        // download when the button is pressed
+        this.on('click', this.onDownload, this);
+    },
+    
+    /**
+     * Handler to download the file
+     * The scope is the button.
+     * 
+     * NOTE: this method add and iframe at the end of the DOM document
+     * the source of the iframe is the url pointing on the server conroller.
+     * The latter returun a document which is automatically loaded.
+     * 
+     * Method suggested on the sencha forum:
+     * www.sencha.com/forum/showthread.php?26471-Download-File-on%28-click-%29
+     */
+    onDownload: function (button, event) {
+    
+        // remove existing iframe
+        try {
+            Ext.destroy(Ext.get('downloadIframe'));
+        } catch (err) {}
+        
+        // create a fresh iframe
+        Ext.DomHelper.append(document.body, {
+            tag: 'iframe',
+            id: 'downloadIframe',
+            frameBorder: 0,
+            width: 0,
+            height: 0,
+            css: 'display:none;visibility:hidden;height:0px;',
+            src: this.url
+        });
+    }   
+});
+
+Ext.reg('xbuttondownload', App.ButtonDownload);