Export store to Excel

**pardha** · 5 Sep 2012 8:19 PM

Hi, Can someone cleanup and show an working example of Excel export without flash.. I have tried of example given in this thread but no luck. I keep getting one another error.

**a_kanin** · 8 Sep 2012 11:11 AM

Hi Wisnia, first of all its amazing all your work. I want to congratulate you for all this.

I already read de 22 pages of the forum. I was struggling to get the example you gave working, but i managed to do it.

Now i tried to integrate it to my app and i want to export a complete store, and i am struggilng with it.
For example i use this:

Ext.define('SomeGrid', {
extend: 'Ext.grid.Panel',
uses: [
'Ext.ux.exporter.Exporter'
],

initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'exporterbutton'
}]
}]
this.callParent(arguments);
}
})

with that ext.define in any you put 'someGrid' and automatically brings the download button and detects store and columns.
but it sends only the records that seens in the page.
and to send the full sotre I believe that you need a different method ... or i dont know what am doing wrong.

Regards.

**Ecthelion** · 11 Sep 2012 4:50 AM

rdominelli's Style.js worked for me, too but the template should be more like this in my opinion:

Code:

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 &gt; 0">',
        '<ss:{name} {propertiesString}>',
          '<tpl for="children">',
            '<ss:{name} {propertiesString} />',
          '</tpl>',
        '</ss:{name}>',
      '</tpl>',
    '</tpl>',
    '</ss:Style>'
  )

> is used instead of '>' and that also prevents the unwanted '0">' characters. The excel warning is still there, though.

Code:

      '<tpl if="children.length == 0">',
        '<ss:{name} {propertiesString} />',
      '</tpl>',

This part reduces the file size as it closes the tags without an end tag, so it's better we leave it there.

**alex9311** · 13 Sep 2012 2:18 PM

Hey all,

I would really like to get this working for my grid project but I'm having a lot of trouble. I have been scouring the internet for a couple days and havn'y found anything very helpful in this topic. Even trying to set the loader is crashing my page. I'm using MVC architechture.

Where should I be setting the loader? In the grid view file or in the top app.js file? Are either of the commented out sections in my grid code the right way to create a print button?

Here is the code for my List.js (my grid)

Code:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/var/wwww/application/ux');
Ext.define('AM.view.user.List' , {
        extend: 'Ext.grid.Panel',
        alias: 'widget.userlist',
        store: 'Users',
        uses: [
                'Ext.ux.exporter.Exporter'
        ],
        dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                layout:{
                        pack: 'center'
                },
                items: [
                { 
                        xtype: 'exporterbutton'
                }
//                      new Ext.ux.Exporter.Button({
//                      component: this,
//                      text     : "Download as .xls"
//                      })
                ]
        }],
        initComponent: function() {
                this.columns=[
                        {header: 'First Name', dataIndex: 'FirstName', width: 75},
                        {header: 'Last Name', dataIndex: 'Last',  width: 75},
                        {header: 'Perm',  dataIndex: 'Perm',     width: 60},
                        {header: 'PreReq', dataIndex: 'PreReq', width: 50,


                ];
                this.callParent(arguments);
        }
});

And here is my index.php

Code:

<html>
<head>
        <title>Waitlist</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/ext-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="ux/exporter/Exporter.js">
</head>
<body></body>
</html>

Any advice or tips are much appreciated!!

**Oxii** · 21 Sep 2012 6:16 AM

Originally Posted by pardha

Hi, Can someone cleanup and show an working example of Excel export without flash.. I have tried of example given in this thread but no luck. I keep getting one another error.

Yes, pleeeease .. we really need someone to do that

**pksiv** · 2 Oct 2012 12:20 PM

Originally Posted by arpeggian

Attachment 37715

Now, i get this error when i open the file downloaded.. help me please

Getting this same problem.

**scaddenp** · 11 Oct 2012 8:26 PM

I too browsed this thread looking for a way to use a non-flash download. It turns out that the core of Ext.ux.exporter is actually just responsible for extracting the data from a grid / store in the correct format. This data is then being passed to Downloadify for presentation to the user.

From memory, it is not easy to directly download data from the client-side (although I may be wrong). However, it is quite easy to initiate from the server-side by setting the src of a hidden iframe to point to a jsp (I presume other server-side languages will work just as well) that initiates a download with the correct response headers and output stream.

Therefore, I have now created a version of Ext.ux.exporter which will safely initiate a download using this server-side code. Check out https://github.com/stormtek/Ext.ux.Exporter for the latest version. This has been tested in Chrome, Firefox, and IE9, and it should work in older browser as well. Also, I have added an example of this being used (which will be great news for many people).

**this-is-sparta** · 15 Oct 2012 11:16 PM

rdominelli,
Although excel opens it, the file exported using your version of Style.js is stiil invalid xml (one may encounter unnecessary 0">)
Actually threr is a simple bug in Style.js: it should be > instead of > in this line:
'<tpl if="children.length > 0">',

**talha06** · 17 Oct 2012 4:03 AM

I have just clone the source from github and applied to one of my grids : Getting an error like this with Ext JS 4.1.1.a on Ubuntu 64-bit while trying to open newly created Excel file:

Code:

General Error
General Input/Output Error

**terjeio** · 17 Oct 2012 5:10 AM

Here is some changes to the CSV-formatter, now quotes strings and escapes double quotes in strings, exports dates in ISO-format. It could be extended by setting ";" as default separator to avoid problems in locales using comma as decimal point.

Code:

//**
 * @class Ext.ux.Exporter.CSVFormatter
 * @extends Ext.ux.Exporter.Formatter
 * Specialised Format class for outputting .csv files
 */
Ext.define("Ext.ux.exporter.csvFormatter.CsvFormatter", {
    extend: "Ext.ux.exporter.Formatter",
    contentType: 'data:text/csv;base64,',
    separator: ",",
    extension: "csv",

    format: function(store, config) {
        this.columns = config.columns || (store.fields ? store.fields.items : store.model.prototype.fields.items);
        return this.getHeaders() + "\n" + this.getRows(store);
    },
    getHeaders: function() {
        var columns = [], title;
        Ext.each(this.columns, function(col) {
          var title;
          if (col.text != undefined) {
            title = col.text;
          } else if(col.name) {
            title = col.name.replace(/_/g, " ");
            title = Ext.String.capitalize(title);
          }

          columns.push(title);
        }, this);

        return columns.join(this.separator);
    },
    getRows: function(store) {
        var rows = [];
        store.each(function(record, index) {
          rows.push(this.geCell(record, index));
        }, this);

        return rows.join("\n");
    },
    geCell: function(record) {
        var cells = [];
        Ext.each(this.columns, function(col) {
            var name = col.name || col.dataIndex;
            if(name) {
                var value;
                if (Ext.isFunction(col.renderer) && !col.xtype == 'datecolumn') {
                  value = col.renderer(record.get(name), null, record);
                } else {
                  value = record.get(name);
                }
                cells.push(Ext.isDate(value) ? (value ? Ext.Date.format(value, 'Y-m-d') : '') : (typeof(value) == "string" ? '"' + value.replace(/"/g, '""') + '"' : value));


            }
        }, this);

        return cells.join(this.separator);
    }
});

Export store to Excel

Thread Tools

Search Thread

Display

Excel Export is not working

Excel Export is not working

Export Complete Store To Excel

Export Complete Store To Excel

Non flash version

Non flash version