Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default Export store to Excel

    Export store to Excel


    Well, here's an exporter that can export a grid, tree or simply a store to excel. It's a fork from another project, I adapted it to work with ExtJs 4, using the new class system and fixed a couple of bugs.
    The Csv exporter isn't implemented and the example and compiled files are not updated (so don't use Exporter-all.js).
    It exports all the data in the store loaded at that time. If a grid is used it uses the renderers and column configurations from it.
    The download is made through a button and uses datauri, so it doesn't work in older ie versions.
    I hope it's useful, if you find bugs or make improvements, just fork it and send me a pull request.
    https://github.com/iwiznia/Ext.ux.Exporter

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,071
    Vote Rating
    40
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    nice work. I'll check it out this weekend! :-)
    Senior Technical Training & Mentoring

    Teahouse Training Company
    Asia Pacific Region (Official Certified Sencha Trainer)

    Check out SenchaWorld.com - The best bits from the Sencha community (videos, blogs, etc)

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    15
    Vote Rating
    0
    nuskin is on a distinguished road

      0  

    Default


    I did not use the Exporter-all.js file as the author suggested but included all other files:
    <script type="text/javascript" src="Base64.js"></script>
    <script type="text/javascript" src="Button.js"></script>
    <script type="text/javascript" src="Formatter.js"></script>
    <script type="text/javascript" src="./excelFormatter/ExcelFormatter.js"></script>
    <script type="text/javascript" src="./excelFormatter/Workbook.js"></script>
    <script type="text/javascript" src="./excelFormatter/Worksheet.js"></script>
    <script type="text/javascript" src="./excelFormatter/Cell.js"></script>
    <script type="text/javascript" src="./excelFormatter/Style.js"></script>
    <script type="text/javascript" src="Exporter.js"></script>

    However, I got the namspace undefined error when loading:
    namespace is undefined

    if (namespace === from...substring(0, from.length) === from) { ext-all-debug.js (line 3487)

    Any idea?

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default


    You don't have to include all the files if you have the ext loader activated. It uses the new class method and defines it's dependencies. You only have to include Exporter.js

  5. #5
    Sencha User vaucer's Avatar
    Join Date
    Aug 2009
    Location
    Paris
    Posts
    50
    Vote Rating
    0
    vaucer is on a distinguished road

      0  

    Default


    Hello,

    It does not work for me on ext4.

    I just add the script in my index:

    Code:
    <script type="text/javascript" src="app/lib/Exporter-all.js">
    And add the button to my grid:

    Code:
    dockedItems:[{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Nouveau ticket',
                                            iconCls:'addticket',
                        action: 'newticket'
                    },{
                        text: 'Prendre en charge',
                                            iconCls:'linkticket',
                        action: 'chrg',
                                            hidden:true
                    },{
                                            iconCls: 'summary',
                                            text: 'Aperçu',
                                            enableToggle: true,
                                            pressed: true,
                                            scope: this,
                                            toggleHandler: this.onSummaryToggle
                                    },'->',{
                        text: 'Archiver',
                                            iconCls:'datab',
                        action: 'archi'
                    },new Ext.ux.Exporter.Button({
                          component: this,
                          text     : "Download as .xls"
                      })]
                }],
    I get Ext.ux.Exporter is undefined

    Thx in advance for your help
    Vaucer

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default


    The exporter-all.js is not updated, so you have to include Exporter.js

  7. #7
    Sencha User
    Join Date
    Aug 2013
    Posts
    1
    Vote Rating
    0
    ketnoimang is on a distinguished road

      0  

    Default


    Quote Originally Posted by vaucer View Post
    Hello,

    It does not work for me on ext4.

    I just add the script in my index:

    Code:
    <script type="text/javascript" src="app/lib/Exporter-all.js">
    And add the button to my grid:

    Code:
    dockedItems:[{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Nouveau ticket',
                                            iconCls:'addticket',
                        action: 'newticket'
                    },{
                        text: 'Prendre en charge',
                                            iconCls:'linkticket',
                        action: 'chrg',
                                            hidden:true
                    },{
                                            iconCls: 'summary',
                                            text: 'Aperçu',
                                            enableToggle: true,
                                            pressed: true,
                                            scope: this,
                                            toggleHandler: this.onSummaryToggle
                                    },'->',{
                        text: 'Archiver',
                                            iconCls:'datab',
                        action: 'archi'
                    },new Ext.ux.Exporter.Button({
                          component: this,
                          text     : "Download as .xls"
                      })]
                }],
    I get Ext.ux.Exporter is undefined

    Thx in advance for your help
    Vaucer

    Im learning Exel and i know a litte code, too. I need this. thanks so much!

  8. #8
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    I looked at the button code, and it is still messed up.
    For now if you need this you can do what I'm currently doing.

    Replace your button code with a standard Ext.button.Button
    Code:
    Ext.create('Ext.button.Button',{
        text:'Download as .xls',
        handler:function(button){
            var gridPanel=button.up('gridpanel');
            var dataURL='data:application/vnd.ms-excel;base64,'+Ext.ux.exporter.Exporter.exportGrid(gridPanel);
            window.location.href=dataURL;
        }
    })
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  9. #9
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    OK, I think I fixed it. Try out this as your Exporter-all.js. I finally put a test scenario together for you and fixed the button.

    Code:
    /**
    *
    *  Base64 encode / decode
    *  http://www.webtoolkit.info/
    *
    **/
    
    
    (function() {
    
    
        // private property
        var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    
    
        // private method for UTF-8 encoding
        function utf8Encode(string) {
            string = string.replace(/\r\n/g,"\n");
            var utftext = "";
            for (var n = 0; n < string.length; n++) {
                var c = string.charCodeAt(n);
                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
            }
            return utftext;
        }
    
    
        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;
                var i = 0;
                input = utf8Encode(input);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                    keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                    keyStr.charAt(enc3) + keyStr.charAt(enc4);
                }
                return output;
            }}
        });
    })();
    
    
    /**
     * @class Ext.ux.Exporter
     * @author Ed Spencer (http://edspencer.net), with modifications from iwiznia.
     * Class providing a common way of downloading data in .xls or .csv format
     */
    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";
                } else {
                    func = func + "Store";
                    component = component.getStore();
                }
                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();
              var columns = Ext.Array.filter(grid.columns, function(col) {
                  if(col.xtype){
                      return !col.hidden && col.xtype != "actioncolumn";
                  }
                  return !col.hidden;
              });
    
    
              Ext.applyIf(config, {
                title  : grid.title,
                columns: 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: store.fields ? store.fields.items : store.model.prototype.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));
            }
        }
    });
    
    
    /**
     * @class Ext.ux.Exporter.Button
     * @extends Ext.Button
     * @author Nige White, with modifications from Ed Spencer, with modifications from iwiznia.
     * Specialised Button class that allows downloading of data via data: urls.
     * Internally, this is just a link.
     * Pass it either an Ext.Component subclass with a 'store' property, or just a store or nothing and it will try to grab the first parent of this button that is a grid or tree panel:
     * new Ext.ux.Exporter.Button({component: someGrid});
     * new Ext.ux.Exporter.Button({store: someStore});
     * @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 getStore method)
     */
    Ext.define("Ext.ux.exporter.Button", {
        extend: "Ext.Button",
        alias: "widget.exporterbutton",
        initComponent: function(config) {
          var me=this;
          config = config || {};
    
    
          Ext.applyIf(config, {
            disabled      : true,
            text          : 'Download',
            cls           : 'download',
            href          : "/"
          });
          me.callParent(arguments);
    
    
          if (me.store || me.component) {
              me.setComponent(me.store || me.component, config);
          } else {
              var self = me;
              me.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);
              });
          }
        },
    
    
        setComponent: function(component, config) {
            var me=this;
            me.component = component;
            me.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() {
              var newConf=Ext.clone(config);
              me.handler=function(){
            	  window.location.href='data:application/vnd.ms-excel;base64,' + Ext.ux.exporter.Base64.encode(Ext.ux.exporter.Exporter.exportAny(me.component, null, newConf));
              }
              me.enable();
            };
    
    
            me.store.on("load", setLink, me);
            if(me.component.isXType){
    	        if(me.component.isXType("gridpanel")) {
    	            Ext.Array.each(me.component.columns, function(col) {
    	                col.on("show", setLink, me);
    	                col.on("hide", setLink, me);
    	            });
    	        }
            }
        },
    
    
        onClick : function(e){
        	var me=this;
            if (e.button != 0) return;
    
    
            if (!me.disabled){
              me.fireEvent("click", me, e);
    
    
              if (me.handler) me.handler.call(me.scope || me, me, e);
            }
        }
    });
    
    
    /**
     * @class Ext.ux.Exporter.Formatter
     * @author Ed Spencer (http://edspencer.net)
     * @cfg {Ext.data.Store} store The store to export
     */
    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.applyIf(config, {
    
    
            });
        }
    });
    
    
    /**
     * @class Ext.ux.Exporter.ExcelFormatter
     * @extends Ext.ux.Exporter.Formatter
     * Specialised Format class for outputting .xls files
     */
    Ext.define("Ext.ux.exporter.excelFormatter.ExcelFormatter", {
        extend: "Ext.ux.exporter.Formatter",
        uses: [
            "Ext.ux.exporter.excelFormatter.Cell",
            "Ext.ux.exporter.excelFormatter.Style",
            "Ext.ux.exporter.excelFormatter.Worksheet",
            "Ext.ux.exporter.excelFormatter.Workbook"
        ],
    
    
        format: function(store, config) {
          var workbook = new Ext.ux.exporter.excelFormatter.Workbook(config);
          workbook.addWorksheet(store, config || {});
    
    
          return workbook.render();
        }
    });
    
    
    /**
     * @class Ext.ux.Exporter.ExcelFormatter.Workbook
     * @extends Object
     * Represents an Excel workbook
     */
    Ext.define("Ext.ux.exporter.excelFormatter.Workbook", {
    
    
      constructor: function(config) {
        config = config || {};
    
    
        Ext.apply(this, config, {
          /**
           * @property title
           * @type String
           * The title of the workbook (defaults to "Workbook")
           */
          title: "Workbook",
    
    
          /**
           * @property worksheets
           * @type Array
           * The array of worksheets inside this workbook
           */
          worksheets: [],
    
    
          /**
           * @property compileWorksheets
           * @type Array
           * Array of all rendered Worksheets
           */
          compiledWorksheets: [],
    
    
          /**
           * @property cellBorderColor
           * @type String
           * The colour of border to use for each Cell
           */
          cellBorderColor: "#e4e4e4",
    
    
          /**
           * @property styles
           * @type Array
           * The array of Ext.ux.Exporter.ExcelFormatter.Style objects attached to this workbook
           */
          styles: [],
    
    
          /**
           * @property compiledStyles
           * @type Array
           * Array of all rendered Ext.ux.Exporter.ExcelFormatter.Style objects for this workbook
           */
          compiledStyles: [],
    
    
          /**
           * @property hasDefaultStyle
           * @type Boolean
           * True to add the default styling options to all cells (defaults to true)
           */
          hasDefaultStyle: true,
    
    
          /**
           * @property hasStripeStyles
           * @type Boolean
           * True to add the striping styles (defaults to true)
           */
          hasStripeStyles: true,
    
    
          windowHeight    : 9000,
          windowWidth     : 50000,
          protectStructure: false,
          protectWindows  : false
        });
    
    
        if (this.hasDefaultStyle) this.addDefaultStyle();
        if (this.hasStripeStyles) this.addStripedStyles();
    
    
        this.addTitleStyle();
        this.addHeaderStyle();
      },
    
    
      render: function() {
        this.compileStyles();
        this.joinedCompiledStyles = this.compiledStyles.join("");
    
    
        this.compileWorksheets();
        this.joinedWorksheets = this.compiledWorksheets.join("");
    
    
        return this.tpl.apply(this);
      },
    
    
      /**
       * Adds a worksheet to this workbook based on a store and optional config
       * @param {Ext.data.Store} store The store to initialize the worksheet with
       * @param {Object} config Optional config object
       * @return {Ext.ux.Exporter.ExcelFormatter.Worksheet} The worksheet
       */
      addWorksheet: function(store, config) {
        var worksheet = new Ext.ux.exporter.excelFormatter.Worksheet(store, config);
    
    
        this.worksheets.push(worksheet);
    
    
        return worksheet;
      },
    
    
      /**
       * Adds a new Ext.ux.Exporter.ExcelFormatter.Style to this Workbook
       * @param {Object} config The style config, passed to the Style constructor (required)
       */
      addStyle: function(config) {
        var style = new Ext.ux.exporter.excelFormatter.Style(config || {});
    
    
        this.styles.push(style);
    
    
        return style;
      },
    
    
      /**
       * Compiles each Style attached to this Workbook by rendering it
       * @return {Array} The compiled styles array
       */
      compileStyles: function() {
        this.compiledStyles = [];
    
    
        Ext.each(this.styles, function(style) {
          this.compiledStyles.push(style.render());
        }, this);
    
    
        return this.compiledStyles;
      },
    
    
      /**
       * Compiles each Worksheet attached to this Workbook by rendering it
       * @return {Array} The compiled worksheets array
       */
      compileWorksheets: function() {
        this.compiledWorksheets = [];
    
    
        Ext.each(this.worksheets, function(worksheet) {
          this.compiledWorksheets.push(worksheet.render());
        }, this);
    
    
        return this.compiledWorksheets;
      },
    
    
      tpl: new Ext.XTemplate(
        '<?xml version="1.0" encoding="utf-8"?>',
        '<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">',
          '<o:DocumentProperties>',
            '<o:Title>{title}</o:Title>',
          '</o:DocumentProperties>',
          '<ss:ExcelWorkbook>',
            '<ss:WindowHeight>{windowHeight}</ss:WindowHeight>',
            '<ss:WindowWidth>{windowWidth}</ss:WindowWidth>',
            '<ss:ProtectStructure>{protectStructure}</ss:ProtectStructure>',
            '<ss:ProtectWindows>{protectWindows}</ss:ProtectWindows>',
          '</ss:ExcelWorkbook>',
          '<ss:Styles>',
            '{joinedCompiledStyles}',
          '</ss:Styles>',
            '{joinedWorksheets}',
        '</ss:Workbook>'
      ),
    
    
      /**
       * Adds the default Style to this workbook. This sets the default font face and size, as well as cell borders
       */
      addDefaultStyle: function() {
        var borderProperties = [
          {name: "Color",     value: this.cellBorderColor},
          {name: "Weight",    value: "1"},
          {name: "LineStyle", value: "Continuous"}
        ];
    
    
        this.addStyle({
          id: 'Default',
          attributes: [
            {
              name: "Alignment",
              properties: [
                {name: "Vertical", value: "Top"},
                {name: "WrapText", value: "1"}
              ]
            },
            {
              name: "Font",
              properties: [
                {name: "FontName", value: "arial"},
                {name: "Size",     value: "10"}
              ]
            },
            {name: "Interior"}, {name: "NumberFormat"}, {name: "Protection"},
            {
              name: "Borders",
              children: [
                {
                  name: "Border",
                  properties: [{name: "Position", value: "Top"}].concat(borderProperties)
                },
                {
                  name: "Border",
                  properties: [{name: "Position", value: "Bottom"}].concat(borderProperties)
                },
                {
                  name: "Border",
                  properties: [{name: "Position", value: "Left"}].concat(borderProperties)
                },
                {
                  name: "Border",
                  properties: [{name: "Position", value: "Right"}].concat(borderProperties)
                }
              ]
            }
          ]
        });
      },
    
    
      addTitleStyle: function() {
        this.addStyle({
          id: "title",
          attributes: [
            {name: "Borders"},
            {name: "Font"},
            {
              name: "NumberFormat",
              properties: [
                {name: "Format", value: "@"}
              ]
            },
            {
              name: "Alignment",
              properties: [
                {name: "WrapText",   value: "1"},
                {name: "Horizontal", value: "Center"},
                {name: "Vertical",   value: "Center"}
              ]
            }
          ]
        });
      },
    
    
      addHeaderStyle: function() {
        this.addStyle({
          id: "headercell",
          attributes: [
            {
              name: "Font",
              properties: [
                {name: "Bold", value: "1"},
                {name: "Size", value: "10"}
              ]
            },
            {
              name: "Interior",
              properties: [
                {name: "Pattern", value: "Solid"},
                {name: "Color",   value: "#A3C9F1"}
              ]
            },
            {
              name: "Alignment",
              properties: [
                {name: "WrapText",   value: "1"},
                {name: "Horizontal", value: "Center"}
              ]
            }
          ]
        });
      },
    
    
      /**
       * Adds the default striping styles to this workbook
       */
      addStripedStyles: function() {
        this.addStyle({
          id: "even",
          attributes: [
            {
              name: "Interior",
              properties: [
                {name: "Pattern", value: "Solid"},
                {name: "Color",   value: "#CCFFFF"}
              ]
            }
          ]
        });
    
    
        this.addStyle({
          id: "odd",
          attributes: [
            {
              name: "Interior",
              properties: [
                {name: "Pattern", value: "Solid"},
                {name: "Color",   value: "#CCCCFF"}
              ]
            }
          ]
        });
    
    
        Ext.each(['even', 'odd'], function(parentStyle) {
          this.addChildNumberFormatStyle(parentStyle, parentStyle + 'date', "[ENG][$-409]dd\-mmm\-yyyy;@");
          this.addChildNumberFormatStyle(parentStyle, parentStyle + 'int', "0");
          this.addChildNumberFormatStyle(parentStyle, parentStyle + 'float', "0.00");
        }, this);
      },
    
    
      /**
       * Private convenience function to easily add a NumberFormat style for a given parentStyle
       * @param {String} parentStyle The ID of the parentStyle Style
       * @param {String} id The ID of the new style
       * @param {String} value The value of the NumberFormat's Format property
       */
      addChildNumberFormatStyle: function(parentStyle, id, value) {
        this.addStyle({
          id: id,
          parentStyle: "even",
          attributes: [
            {
              name: "NumberFormat",
              properties: [{name: "Format", value: value}]
            }
          ]
        });
      }
    });
    
    
    /**
     * @class Ext.ux.Exporter.ExcelFormatter.Worksheet
     * @extends Object
     * Represents an Excel worksheet
     * @cfg {Ext.data.Store} store The store to use (required)
     */
    Ext.define("Ext.ux.exporter.excelFormatter.Worksheet", {
    
    
      constructor: function(store, config) {
        config = config || {};
    
    
        this.store = store;
    
    
        Ext.applyIf(config, {
          hasTitle   : true,
          hasHeadings: true,
          stripeRows : true,
    
    
          title      : "Workbook",
          columns    : store.fields == undefined ? {} : store.fields.items
        });
    
    
        Ext.apply(this, config);
    
    
        Ext.ux.exporter.excelFormatter.Worksheet.superclass.constructor.apply(this, arguments);
      },
    
    
      /**
       * @property dateFormatString
       * @type String
       * String used to format dates (defaults to "Y-m-d"). All other data types are left unmolested
       */
      dateFormatString: "Y-m-d",
    
    
      worksheetTpl: new Ext.XTemplate(
        '<ss:Worksheet ss:Name="{title}">',
          '<ss:Names>',
            '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'{title}\'!R1:R2" />',
          '</ss:Names>',
          '<ss:Table x:FullRows="1" x:FullColumns="1" ss:ExpandedColumnCount="{colCount}" ss:ExpandedRowCount="{rowCount}">',
            '{columns}',
            '<ss:Row ss:Height="38">',
                '<ss:Cell ss:StyleID="title" ss:MergeAcross="{colCount - 1}">',
                  '<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">',
                    '<html:B><html:U><html:Font html:Size="15">{title}',
                    '</html:Font></html:U></html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />',
                '</ss:Cell>',
            '</ss:Row>',
            '<ss:Row ss:AutoFitHeight="1">',
              '{header}',
            '</ss:Row>',
            '{rows}',
          '</ss:Table>',
          '<x:WorksheetOptions>',
            '<x:PageSetup>',
              '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />',
              '<x:Footer x:Data="Page &amp;P of &amp;N" x:Margin="0.5" />',
              '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />',
            '</x:PageSetup>',
            '<x:FitToPage />',
            '<x:Print>',
              '<x:PrintErrors>Blank</x:PrintErrors>',
              '<x:FitWidth>1</x:FitWidth>',
              '<x:FitHeight>32767</x:FitHeight>',
              '<x:ValidPrinterInfo />',
              '<x:VerticalResolution>600</x:VerticalResolution>',
            '</x:Print>',
            '<x:Selected />',
            '<x:DoNotDisplayGridlines />',
            '<x:ProtectObjects>False</x:ProtectObjects>',
            '<x:ProtectScenarios>False</x:ProtectScenarios>',
          '</x:WorksheetOptions>',
        '</ss:Worksheet>'
      ),
    
    
      /**
       * Builds the Worksheet XML
       * @param {Ext.data.Store} store The store to build from
       */
      render: function(store) {
        return this.worksheetTpl.apply({
          header  : this.buildHeader(),
          columns : this.buildColumns().join(""),
          rows    : this.buildRows().join(""),
          colCount: this.columns.length,
          rowCount: this.store.getCount() + 2,
          title   : this.title
        });
      },
    
    
      buildColumns: function() {
        var cols = [];
    
    
        Ext.each(this.columns, function(column) {
          cols.push(this.buildColumn());
        }, this);
    
    
        return cols;
      },
    
    
      buildColumn: function(width) {
        return Ext.String.format('<ss:Column ss:AutoFitWidth="1" ss:Width="{0}" />', width || 164);
      },
    
    
      buildRows: function() {
        var rows = [];
    
    
        this.store.each(function(record, index) {
          rows.push(this.buildRow(record, index));
        }, this);
    
    
        return rows;
      },
    
    
      buildHeader: function() {
        var cells = [];
    
    
        Ext.each(this.columns, function(col) {
          var title;
    
    
          //if(col.dataIndex) {
              if (col.text != undefined) {
                title = col.text;
              } else if(col.name) {
                //make columns taken from Record fields (e.g. with a col.name) human-readable
                title = col.name.replace(/_/g, " ");
                title = title.charAt(0).toUpperCase() + title.substr(1).toLowerCase();
              }
    
    
              cells.push(Ext.String.format('<ss:Cell ss:StyleID="headercell"><ss:Data ss:Type="String">{0}</ss:Data><ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>', title));
          //}
        }, this);
    
    
        return cells.join("");
      },
    
    
      buildRow: function(record, index) {
        var style,
            cells = [];
        if (this.stripeRows === true) style = index % 2 == 0 ? 'even' : 'odd';
    
    
        Ext.each(this.columns, function(col) {
          var name  = col.name || col.dataIndex;
    
    
          if(name) {
              //if given a renderer via a ColumnModel, use it and ensure data type is set to String
              if (Ext.isFunction(col.renderer)) {
                var value = col.renderer(record.get(name), null, record),
                    type = "String";
              } else {
                var value = record.get(name),
                    type  = this.typeMappings[col.type || record.fields.get(name).type.type];
              }
    
    
              cells.push(this.buildCell(value, type, style).render());
          }
        }, this);
    
    
        return Ext.String.format("<ss:Row>{0}</ss:Row>", cells.join(""));
      },
    
    
      buildCell: function(value, type, style) {
        if (type == "DateTime" && Ext.isFunction(value.format)) value = value.format(this.dateFormatString);
    
    
        return new Ext.ux.exporter.excelFormatter.Cell({
          value: value,
          type : type,
          style: style
        });
      },
    
    
      /**
       * @property typeMappings
       * @type Object
       * Mappings from Ext.data.Record types to Excel types
       */
      typeMappings: {
        'int'   : "Number",
        'string': "String",
        'float' : "Number",
        'date'  : "DateTime"
      }
    });
    
    
    /**
     * @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>'
        )
    });
    
    
    /**
     * @class Ext.ux.Exporter.ExcelFormatter.Style
     * @extends Object
     * Represents a style declaration for a Workbook (this is like defining CSS rules). Example:
     *
     * new Ext.ux.Exporter.ExcelFormatter.Style({
     *   attributes: [
     *     {
     *       name: "Alignment",
     *       properties: [
     *         {name: "Vertical", value: "Top"},
     *         {name: "WrapText", value: "1"}
     *       ]
     *     },
     *     {
     *       name: "Borders",
     *       children: [
     *         name: "Border",
     *         properties: [
     *           {name: "Color", value: "#e4e4e4"},
     *           {name: "Weight", value: "1"}
     *         ]
     *       ]
     *     }
     *   ]
     * })
     *
     * @cfg {String} id The ID of this style (required)
     * @cfg {Array} attributes The attributes for this style
     * @cfg {String} parentStyle The (optional parentStyle ID)
     */
    Ext.define("Ext.ux.exporter.excelFormatter.Style", {
      constructor: function(config) {
        config = config || {};
    
    
        Ext.apply(this, config, {
          parentStyle: '',
          attributes : []
        });
    
    
        Ext.ux.exporter.excelFormatter.Style.superclass.constructor.apply(this, arguments);
    
    
        if (this.id == undefined) throw new Error("An ID must be provided to Style");
    
    
        this.preparePropertyStrings();
      },
    
    
      /**
       * Iterates over the attributes in this style, and any children they may have, creating property
       * strings on each suitable for use in the XTemplate
       */
      preparePropertyStrings: function() {
        Ext.each(this.attributes, function(attr, index) {
          this.attributes[index].propertiesString = this.buildPropertyString(attr);
          this.attributes[index].children = attr.children || [];
    
    
          Ext.each(attr.children, function(child, childIndex) {
            this.attributes[index].children[childIndex].propertiesString = this.buildPropertyString(child);
          }, this);
        }, this);
      },
    
    
      /**
       * Builds a concatenated property string for a given attribute, suitable for use in the XTemplate
       */
      buildPropertyString: function(attribute) {
        var propertiesString = "";
    
    
        Ext.each(attribute.properties || [], function(property) {
          propertiesString += Ext.String.format('ss:{0}="{1}" ', property.name, property.value);
        }, this);
    
    
        return propertiesString;
      },
    
    
      render: function() {
        return this.tpl.apply(this);
      },
    
    
      tpl: new Ext.XTemplate(
        '<tpl if="parentStyle.length == 0">',
          '<ss:Style ss:ID="{id}">',
        '</tpl>',
        '<tpl if="parentStyle.length != 0">',
          '<ss:Style ss:ID="{id}" ss:Parent="{parentStyle}">',
        '</tpl>',
        '<tpl for="attributes">',
          '<tpl if="children.length == 0">',
            '<ss:{name} {propertiesString} />',
          '</tpl>',
          '<tpl if="children.length > 0">',
            '<ss:{name} {propertiesString}>',
              '<tpl for="children">',
                '<ss:{name} {propertiesString} />',
              '</tpl>',
            '</ss:{name}>',
          '</tpl>',
        '</tpl>',
        '</ss:Style>'
      )
    });
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  10. #10
    Touch Premium Member
    Join Date
    May 2011
    Posts
    48
    Vote Rating
    0
    RAD001 is on a distinguished road

      0  

    Default 'Downloadify' is undefined

    'Downloadify' is undefined


    Hi All,



    did anyone able to get this working??
    I am getting this error on FF and IE8
    Code:
    'Downloadify' is undefined
    any idea ???

Thread Participants: 107

  1. dawesi (1 Post)
  2. feiji1983 (1 Post)
  3. isaac (1 Post)
  4. radtad (4 Posts)
  5. pavanextjs (5 Posts)
  6. aragm (1 Post)
  7. terjeio (1 Post)
  8. edspencer (1 Post)
  9. nitingautam (2 Posts)
  10. edykstra (3 Posts)
  11. kalchas (4 Posts)
  12. pardha (1 Post)
  13. shelly (1 Post)
  14. talha06 (3 Posts)
  15. vaucer (1 Post)
  16. SMMJ_Dev (7 Posts)
  17. Ekambos (1 Post)
  18. vispiron (1 Post)
  19. sdruckerfig (3 Posts)
  20. jwcraig (1 Post)
  21. dbrin (1 Post)
  22. scaddenp (2 Posts)
  23. grisevich (1 Post)
  24. semialcruz (3 Posts)
  25. krishnarn1 (1 Post)
  26. mikih (1 Post)
  27. Teemac (3 Posts)
  28. jpcoppol (1 Post)
  29. ssuarez (4 Posts)
  30. trinitrotoluen (1 Post)
  31. aladdina (1 Post)
  32. Mental (3 Posts)
  33. nuskin (5 Posts)
  34. droessner (5 Posts)
  35. HIG (1 Post)
  36. jjerome (4 Posts)
  37. bee (2 Posts)
  38. RAD001 (8 Posts)
  39. RNL (1 Post)
  40. shawon (4 Posts)
  41. parkcity (4 Posts)
  42. carlosgoias (1 Post)
  43. Ewoq (7 Posts)
  44. skotamreddy (1 Post)
  45. another_i (5 Posts)
  46. neerajbherwal (1 Post)
  47. nimda13 (2 Posts)
  48. acteon (2 Posts)
  49. ma1986 (2 Posts)
  50. pierrocknroll (1 Post)
  51. Aranair (7 Posts)
  52. clarkbanks (1 Post)
  53. delusion (2 Posts)
  54. Jay Tanwar (2 Posts)
  55. supermarcos (6 Posts)
  56. mmuzamil (1 Post)
  57. amishra06 (1 Post)
  58. hundare (1 Post)
  59. Ecthelion (1 Post)
  60. balajivaikar (2 Posts)
  61. jarobi (1 Post)
  62. ferchotipin (2 Posts)
  63. sebas2515 (3 Posts)
  64. arpeggian (3 Posts)
  65. a_kanin (1 Post)
  66. MeDigital (1 Post)
  67. Vasanthoo7 (3 Posts)
  68. jeora (1 Post)
  69. BlackLine (1 Post)
  70. mrhomer (7 Posts)
  71. KostasP (2 Posts)
  72. rdominelli (4 Posts)
  73. pksiv (1 Post)
  74. yoisen (2 Posts)
  75. opms (1 Post)
  76. Oxii (1 Post)
  77. sarz (6 Posts)
  78. gabsoftware (3 Posts)
  79. 9josh (1 Post)
  80. ananthk (2 Posts)
  81. psnprasad (1 Post)
  82. alex9311 (2 Posts)
  83. mpasacrita@escholar.com (1 Post)
  84. Garry Hawkins (1 Post)
  85. chandrima31 (1 Post)
  86. this-is-sparta (1 Post)
  87. vitalz (7 Posts)
  88. Sheng_Yunzhou (2 Posts)
  89. xdengli (1 Post)
  90. sgscontact (1 Post)
  91. nitingogia@gmail.com (1 Post)
  92. Swetosuvro (1 Post)
  93. sudrak (1 Post)
  94. cdmein (1 Post)
  95. code4jhon (1 Post)
  96. felixfang (2 Posts)
  97. jayasingh1802 (2 Posts)
  98. abdul haq (3 Posts)
  99. gilmaredo@gmail.com (1 Post)
  100. ketnoimang (1 Post)
  101. ricardo.lourival (1 Post)
  102. Sundarganesh Ramar (1 Post)
  103. madhavan281981 (1 Post)
  104. shankar8rajah1 (1 Post)
  105. benny_GI (1 Post)
  106. cojocarutudor (1 Post)
  107. tajashwin (1 Post)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar