Ported to work with Exjs 4. Changed names to follow convention and us…

…e the class loading system. Fixed error when grid have an actions column. Also modified the button to allow auto detection of component it exports. Not tested with trees.
stormtek · Jun 8, 2011 · 71cc1dc · 71cc1dc
1 parent 71e60b8
commit 71cc1dc
Show file tree

Hide file tree

Showing 13 changed files with 280 additions and 281 deletions.
diff --git a/Base64.js b/Base64.js
@@ -5,7 +5,7 @@
 *
 **/
 
-var Base64 = (function() {
+(function() {
 
     // private property
     var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
@@ -32,12 +32,10 @@ var Base64 = (function() {
         return utftext;
     }
 
-    // public method for encoding
-    return {
+    Ext.define("Ext.ux.exporter.Base64", {
+        statics: {
         //This was the original line, which tries to use Firefox's built in Base64 encoder, but this kept throwing exceptions....
         // encode : (typeof btoa == 'function') ? function(input) { return btoa(input); } : function (input) {
-
-
         encode : function (input) {
             var output = "";
             var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
@@ -61,6 +59,6 @@ var Base64 = (function() {
                 keyStr.charAt(enc3) + keyStr.charAt(enc4);
             }
             return output;
-        }
-    };
+        }}
+    });
 })();
diff --git a/Button.js b/Button.js
@@ -10,78 +10,51 @@
  * @cfg {Ext.Component} component The component the store is bound to
  * @cfg {Ext.data.Store} store The store to export (alternatively, pass a component with a store property)
  */
-Ext.ux.Exporter.Button = Ext.extend(Ext.Button, {
-  constructor: function(config) {
-    config = config || {};
-
-    Ext.applyIf(config, {
-      exportFunction: 'exportGrid',
-      disabled      : true,
-      text          : 'Download',
-      cls           : 'download'
-    });
-
-    if (config.store == undefined && config.component != undefined) {
-      Ext.applyIf(config, {
-        store: config.component.store
-      });
-    } else {
+Ext.define("Ext.ux.exporter.Button", {
+    extend: "Ext.Button",
+    alias: "widget.exporterbutton",
+    constructor: function(config) {
+      config = config || {};
+
       Ext.applyIf(config, {
-        component: {
-          store: config.store
-        }
+        disabled      : true,
+        text          : 'Download',
+        cls           : 'download',
+        href          : "/"
       });
-    }
-
-    Ext.ux.Exporter.Button.superclass.constructor.call(this, config);
-
-    if (this.store && Ext.isFunction(this.store.on)) {
-      var setLink = function() {
-        this.getEl().child('a', true).href = 'data:application/vnd.ms-excel;base64,' + Ext.ux.Exporter[config.exportFunction](this.component, null, config);
-
-        this.enable();
-      };
-
-      if (this.el) {
-        setLink.call(this);
+
+      Ext.ux.exporter.Button.superclass.constructor.call(this, config);
+
+      if (this.store || this.component) {
+          this.setComponent(this.store || this.component, config);
       } else {
-        this.on('render', setLink, this);
+          var self = this;
+          this.on("render", function() { // We wait for the combo to be rendered, so we can look up to grab the component containing it
+              self.setComponent(self.up("gridpanel") || self.up("treepanel"), config);
+          });
       }
-
-      this.store.on('load', setLink, this);
-    }
-  },
-
-  template: new Ext.Template(
-    '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
-    '<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><a class="x-btn-text" href="{1}" target="{2}">{0}</a></td><td class="x-btn-right"><i> </i></td>',
-    "</tr></tbody></table>"),
+    },
 
-    onRender:   function(ct, position){
-      var btn, targs = [this.text || ' ', this.href, this.target || "_self"];
-      if (position){
-        btn = this.template.insertBefore(position, targs, true);
-      }else{
-        btn = this.template.append(ct, targs, true);
-      }
-      var btnEl = btn.child("a:first");
-      this.btnEl = btnEl;
-      btnEl.on('focus', this.onFocus, this);
-      btnEl.on('blur', this.onBlur, this);
+    setComponent: function(component, config) {
+        this.component = component;
+        this.store = !component.is ? component : component.getStore(); // only components or stores, if it doesn't respond to is method, it's a store
+        var setLink = function() {
+          this.el.query('a', true)[0].href = 'data:application/vnd.ms-excel;base64,' + Ext.ux.exporter.Exporter.exportAny(this.component, null, config);
+          this.enable();
+        };
 
-      this.initButtonEl(btn, btnEl);
-      Ext.ButtonToggleMgr.register(this);
+        this.store.on("load", setLink, this);
     },
 
     onClick : function(e){
-      if (e.button != 0) return;
-      
-      if (!this.disabled){
-        this.fireEvent("click", this, e);
-        
-        if (this.handler) this.handler.call(this.scope || this, this, e);
-      }
+        if (e.button != 0) return;
+
+        if (!this.disabled){
+          this.fireEvent("click", this, e);
+
+          if (this.handler) this.handler.call(this.scope || this, this, e);
+        }
     }
 });
 
-Ext.reg('exportbutton', Ext.ux.Exporter.Button);
+//Ext.reg('exportbutton', Ext.ux.exporter.Button);
diff --git a/ExcelFormatter/Cell.js b/ExcelFormatter/Cell.js
diff --git a/ExcelFormatter/ExcelFormatter.js b/ExcelFormatter/ExcelFormatter.js
diff --git a/Exporter.js b/Exporter.js
@@ -3,47 +3,66 @@
  * @author Ed Spencer (http://edspencer.net)
  * Class providing a common way of downloading data in .xls or .csv format
  */
-Ext.ux.Exporter = function() {
-  return {
-    /**
-     * Exports a grid, using the .xls formatter by default
-     * @param {Ext.grid.GridPanel} grid The grid to export from
-     * @param {Object} config Optional config settings for the formatter
-     */
-    exportGrid: function(grid, formatter, config) {
-      config = config || {};
-      formatter = formatter || new Ext.ux.Exporter.ExcelFormatter();
-
-      Ext.applyIf(config, {
-        title  : grid.title,
-        columns: grid.getColumnModel().config
-      });
-
-      return Base64.encode(formatter.format(grid.store, config));
-    },
-
-    exportStore: function(store, formatter, config) {
-       config = config || {};
-       formatter = formatter || new Ext.ux.Exporter.ExcelFormatter();
-
-       Ext.applyIf(config, {
-         columns: config.store.fields.items
-       });
-
-       return Base64.encode(formatter.format(store, config));
-    },
-
-    exportTree: function(tree, formatter, config) {
-      config    = config || {};
-      formatter = formatter || new Ext.ux.Exporter.ExcelFormatter();
-
-      var store = tree.store || config.store;
-
-      Ext.applyIf(config, {
-        title: tree.title
-      });
-
-      return Base64.encode(formatter.format(store, config));
+Ext.define("Ext.ux.exporter.Exporter", {
+    uses: [
+        "Ext.ux.exporter.Base64",
+        "Ext.ux.exporter.Button",
+        "Ext.ux.exporter.csvFormatter.CsvFormatter",
+        "Ext.ux.exporter.excelFormatter.ExcelFormatter"
+    ],
+
+    statics: {
+        exportAny: function(component, formatter, config) {
+            var func = "export";
+            if(!component.is) {
+                func = func + "Store";
+            } else if(component.is("gridpanel")) {
+                func = func + "Grid";
+            } else if (component.is("treepanel")) {
+                func = func + "Tree";
+            }
+            return this[func](component, formatter, config);
+        },
+
+        /**
+         * Exports a grid, using the .xls formatter by default
+         * @param {Ext.grid.GridPanel} grid The grid to export from
+         * @param {Object} config Optional config settings for the formatter
+         */
+        exportGrid: function(grid, formatter, config) {
+          config = config || {};
+          formatter = formatter || new Ext.ux.exporter.excelFormatter.ExcelFormatter();
+
+          Ext.applyIf(config, {
+            title  : grid.title,
+            columns: grid.columns
+          });
+
+          return Ext.ux.exporter.Base64.encode(formatter.format(grid.store, config));
+        },
+
+        exportStore: function(store, formatter, config) {
+           config = config || {};
+           formatter = formatter || new Ext.ux.exporter.excelFormatter.ExcelFormatter();
+
+           Ext.applyIf(config, {
+             columns: config.store.fields.items
+           });
+
+           return Ext.ux.exporter.Base64.encode(formatter.format(store, config));
+        },
+
+        exportTree: function(tree, formatter, config) {
+          config    = config || {};
+          formatter = formatter || new Ext.ux.exporter.excelFormatter.ExcelFormatter();
+
+          var store = tree.store || config.store;
+
+          Ext.applyIf(config, {
+            title: tree.title
+          });
+
+          return Ext.ux.exporter.Base64.encode(formatter.format(store, config));
+        }
     }
-  };
-}();
+});
diff --git a/Formatter.js b/Formatter.js
@@ -3,17 +3,16 @@
  * @author Ed Spencer (http://edspencer.net)
  * @cfg {Ext.data.Store} store The store to export
  */
-Ext.ux.Exporter.Formatter = function(config) {
-  config = config || {};
-        
-  Ext.applyIf(config, {
-
-  });
-};
+Ext.define("Ext.ux.exporter.Formatter", {
+    /**
+     * Performs the actual formatting. This must be overridden by a subclass
+     */
+    format: Ext.emptyFn,
+    constructor: function(config) {
+        config = config || {};
 
-Ext.ux.Exporter.Formatter.prototype = {
-  /**
-   * Performs the actual formatting. This must be overridden by a subclass
-   */
-  format: Ext.emptyFn
-};
+        Ext.applyIf(config, {
+
+        });
+    }
+});
diff --git a/build b/build
@@ -14,8 +14,8 @@ Button.js
 
 Formatter.js
 
-ExcelFormatter/ExcelFormatter.js
-ExcelFormatter/Workbook.js
-ExcelFormatter/Worksheet.js
-ExcelFormatter/Cell.js
-ExcelFormatter/Style.js
+excelFormatter/ExcelFormatter.js
+excelFormatter/Workbook.js
+excelFormatter/Worksheet.js
+excelFormatter/Cell.js
+excelFormatter/Style.js
diff --git a/CSVFormatter/CSVFormatter.js → csvFormatter/CsvFormatter.js b/CSVFormatter/CSVFormatter.js → csvFormatter/CsvFormatter.js
@@ -3,6 +3,6 @@
  * @extends Ext.ux.Exporter.Formatter
  * Specialised Format class for outputting .csv files
  */
-Ext.ux.Exporter.CSVFormatter = Ext.extend(Ext.ux.Exporter.Formatter, {
-
+Ext.define("Ext.ux.exporter.csvFormatter.CsvFormatter", {
+    extend: "Ext.ux.exporter.Formatter"
 });
diff --git a/excelFormatter/Cell.js b/excelFormatter/Cell.js
@@ -0,0 +1,27 @@
+/**
+ * @class Ext.ux.Exporter.ExcelFormatter.Cell
+ * @extends Object
+ * Represents a single cell in a worksheet
+ */
+
+Ext.define("Ext.ux.exporter.excelFormatter.Cell", {
+    constructor: function(config) {
+        Ext.applyIf(config, {
+          type: "String"
+        });
+
+        Ext.apply(this, config);
+
+        Ext.ux.exporter.excelFormatter.Cell.superclass.constructor.apply(this, arguments);
+    },
+
+    render: function() {
+        return this.tpl.apply(this);
+    },
+
+    tpl: new Ext.XTemplate(
+        '<ss:Cell ss:StyleID="{style}">',
+          '<ss:Data ss:Type="{type}"><![CDATA[{value}]]></ss:Data>',
+        '</ss:Cell>'
+    )
+});