Export store to Excel

[wiznia]

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

[dawesi]

nice work. I'll check it out this weekend! :-)

[nuskin]

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?

[wiznia]

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

[vaucer]

Hello,

It does not work for me on ext4.

I just add the script in my index:

<script type="text/javascript" src="app/lib/Exporter-all.js">

And add the button to my grid:

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

[wiznia]

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

[Teemac]

Ran into the same problem as nuskin, but happened for me when I tried just including Exporter.js, when I included all the files, I was able actually get into the button class when adding the button but not sure what I need to set in the buttons config to get it to work. Tried the storeId, tried the store itself, and even tried the grid as the component. Any ideas?

[wiznia]

I use it like this. If the exporterebutton is inside a grid or a tree it autodetects the store. You can use it in a grid without creating a new class, just add the 'uses' config and the exporterbutton in the dockedItems.

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/path-to-ext-ux');

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

    initComponent: function() {
        this.store = "SomeStore";

        this.dockedItems = [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'exporterbutton'
            }];
        this.columns = [/* YOUR COLUMNS */];
        this.callParent(arguments);
    }
});

[Teemac]

Thanks that worked except that in the button class setComponent function the columns don't have the .on function off them, seem like a simple array. Also the show and hide events never seemed to get fired. So I set it on the render and used the headerCt instead of columns, which seems to work but when I actually click the download, it navigates to data:application/vnd.ms-excel;base64,PD94bWwgdm....Lots more just like it, but doens't do anything more. As I haven't tried to use the data stuff before not sure what's it's supposed to do. I'm trying to make a simpler version of my grid to show as an example and see if it works, but wanted to see if you had ideas ahead of time, thanks again for any help you can provide.

Ext.Array.each(
 


this.component.headerCt.items.items, function(col) {

                col.on(
 


"render", setLink, me);

            });

[Ewoq]

Hi all

I have the same problem as teemac, I think.

I get the same result from my app, as I get from the exporter example. When I click the button in both the example and my app, I get a part file from firefox and this only contains some column information plus some other values that doesn't appear in the grid.

I'm using the Exporter.js in my app, so that should be okay.

I made a small change to the Worksheet.js after line 150:

if(record.fields.get(name)) {
                var value = record.get(name),
                    type  = this.typeMappings[col.type || record.fields.get(name).type.type];
            }

I changed it because I have an empty column that it didn't like. But I don't think that is a problem.

Any suggestions?