Ext.ux.Exporter – export any Grid to Excel or CSV
November 24, 2009 by Ed Spencer · 80 Comments
Sometimes we want to print things, like grids or trees. The Ext JS printing plugin is pretty good for that. But what if we want to export them instead? Enter Ext.ux.Exporter.
Ext.ux.Exporter allows any store-based component (such as grids) to be exported, locally, to Excel or any other format. It does not require any server side programming – the export document is generated on the fly, entirely in JavaScript.
The extension serves as a base for exporting any kind of data, but comes bundled with a .xls export formatter suitable for exporting any Grid straight to Excel. Here’s how to do that:
var grid = new Ext.grid.GridPanel({
store: someStore,
tbar : [
{
xtype: 'exportbutton',
store: someStore
}
],
//your normal grid config goes here
});
Clicking the Download button in the top toolbar iterates over the data in the store and creates an Excel file locally, before Base64 encoding it and redirecting the browser via a data url. If you have Excel or a similar program installed your browser should ask you to save the file or open it with Excel.
I put together a quick example of the plugin in action inside the repository, just clone or download the code and drag the examples/index.html file into your browser to run it.
The Exporter will work with any store or store-based component. It also allows export to any format – for example CSV or PDF. Although the Excel Formatter is probably the most useful, implementing a CSV or other Formatter should be trivial – check out the Excel Formatter example in the ExcelFormatter directory.
Related posts
Software Architect at Sencha Inc where I lead the development of Ext JS and supporting projects. A longtime lover of JavaScript and related geekery, currently living in Palo Alto.
I’ve got exporter and downloadify to cooperate, but everytime the store is reloaded the button “duplicates” it self, as in the button gets wider by the width of the download image.
Anyone know how to fix this?
thanks in advance
Christian
Can anyone tell me why my exporter does not work in IE?
Many thanks,
Rob
hello,
I am trying use the Exporter and i receive that error on click in the Exporter.Button:
Erro: this.handler.call is not a function
Source-file: ../ext/ext-all.js
Line: 7
anyone know about that?
thaks
Excelent work whit the exporter adn great work with Extjs, i am looking for a version of the exporter that fully works on IE 8 and ExtJs 3.03.
thanks
hi i am looking for a version of the exporter that fully works on IE 8 and ExtJs 3.03.
thanks
Hello ed, nice works! brilliant, indeed!
I have been tried to use this ux with ExtJS 3.3.1
At first, I encountered error msg in the Firebug like this:
grid.getColumnModel is not a function
Exporter-all.js in line 86: columns: grid.getColumnModel().config
After I eliminate that line of code, all is works!
But, I am worried that eliminating that line of code could trigger another error / unappropriate behaviour..
Any idea?
First of all thanks for great plugin. How to export all the data(paginated) to excel?. Now, it’s only exporting current page data.
Hi, brilliant stuff!
I am trying to get this working on an Ext Designer project and was wondering if you could give some hints on how to get an exportbutton xtype. I assume there must be some overriding of sorts.
Thanks.
I have the same problem as Jan S,
For some reason the link created in the button always reloads my site.
this.getEl().child(’a’, true).href = “javascript:void(0)”; //’data:application/vnd.ms-excel;base64,’ + Ext.ux.Exporter[config.exportFunction](this.component, null, config);
And firebug says: this.getEl is not defined
Any idea?
i’m using extjs 3.2.1
i want to using exporter in my datagrid, but it seems error like this
b[d.xtype || e] is not a constructor
could anyone help me to solve this problem?
Hello,
Brilliant code.
Just like others, I cannot run the sample in IE8. No specific error is thrown.
But, I can successfully run the sample in FF (including FF4).
Any idea why the code behaves wiered in IE8?
Thanks
hi About Ed Spencer
I tried your code and it works fine with an ArrayStore, but i need to charge the records from a database, and when i change the ArrayStore for a JSonStore, it doesn´t work, can you help me please ! thanks
I just change the store for this:
var proxyArea = new Ext.data.HttpProxy({
url: ‘php/filtroArea.php’,
method: ‘post’
});
var store = new Ext.data.JsonStore({
url: ‘php/filtroArea.php’,
proxy: proxyArea,
fields: [
{name: 'idarea', type: 'int'},'codigoarea', 'nombrearea',{name: 'jefearea', type: 'int'}],
});
store.load();
of course i change the column from de grid like this:
columns: [
{header: 'idarea', width:170, width:160, dataIndex: 'idarea'},
{header: 'Código Area', width: 75, dataIndex: 'codigoarea'},
{header: 'Nombre Area', width: 75, dataIndex: 'nombrearea'},
{header: 'Jefe Area', width: 75, dataIndex: 'jefearea'}
],
hey Ed Spencer, please answer me, i need you… thanks
The Data URI just sits there in IE without IE doing anything with it. No prompt to download, nothing opening in excel, no messages of any sort.
Any ideas?
I have a grid with a toolbar with the xtype: ‘exportbutton’ with the same store as the grid uses.
However, when I do a reconfigure on the grid with new data in the store, the export still shows the old data.
How do I reconfigure the export also?
any one tried with ext js 4?
Has anyone tried with extjs 4? and is there a way to export grid data to PDF?
Hi, Ed,
It’s an amazing plugin, and I can run the example smoothly.
Yet there is another problem when i want to use it in my Extjs4 code. maybe it’s because the version confiliction between extjs4 and extjs3. Could you send me some tips about that?
will there be a Ext Js 4 Compatible Exporter any time soon, it would really help!
I need help for EXTjs 4.0 grid to excel converter for Ie7 and ie8 …thanks in Advance
@maraccio there is a community-lead effort around porting it at http://www.sencha.com/forum/showthread.php?136598-Export-store-to-Excel
i tried exporting the grid with row expander plugin ,but the excel file is not displaying properly and it is not showing the rowbody content ……can u plz help
Hi i have a problem with Export pivotGrid
this is my code:
var gridDataStore = new Ext.data.Store({
id: ‘gridDataStore’,
proxy: new Ext.data.HttpProxy({
url: ‘datos.php’, // File to connect to
method: ‘POST’
}),
reader: new Ext.data.JsonReader({
root: ‘results’,
totalProperty: ‘total’,
id: ‘RSLCOD’
},[
{name: 'EMPCOD', type: 'string', mapping: 'EMPCOD'},
{name: 'OFICOD', type: 'string', mapping: 'OFICOD'},
{name: 'ARECOD', type: 'string', mapping: 'ARECOD'},
{name: 'CTDCOD', type: 'string', mapping: 'CTDCOD'},
{name: 'MOTIVOCIERRE', type: 'string', mapping: 'MOTIVOCIERRE'},
{name: 'SITUACIONRECLAMO', type: 'string', mapping: 'SITUACIONRECLAMO'}
])
//,
//sortInfo:{field: ‘Nombre’, direction: “ASC”}
})
gridDataStore.load();
var pivotGrid = new Ext.grid.PivotGrid({
tbar : [
{
xtype: 'exportbutton',
store: gridDataStore
}
],
title : ‘REclamos x XXXXXXX’,
width : 800,
height : 259,
renderTo : ‘docbody’,
store : gridDataStore,
aggregator: ‘count’,
measure : ‘value’,
viewConfig: {
title: ‘Reclamos por YYYYYYYYY’
},
leftAxis: [
{
width: 80,
dataIndex: 'OFICOD'
},
{
width: 90,
dataIndex: 'ARECOD'
},
{
dataIndex: 'SITUACIONRECLAMO'
}
],
topAxis: [
{
dataIndex: 'CTDCOD'
},
{
dataIndex: 'MOTIVOCIERRE'
}
]
});
hi Ed,,
Can we save an Excel file with custom name…?
i have problem if i save it with random name…
tq.
regards
topan.
I see here that you mention that you are working to get this plug-in ported over to other versions of ExtJS:
“his plugin does not support ExJS 4.I`’m working to port it to ExtJS 4.”
First of all, thank you very much for the plug-in. I was going to look into what was necessary to get it working in ExtJS 3.1.1 which is the release that we have in production. Are you planning on testing it on other versions of ExtJS 3.x? Also, do you have a time frame in mind. I am looking into the errors that I am getting, but I’m sure any fix that I may have will not be as good as yours!
Thanks
David
I am getting ‘Downloadify’ is undefied error.
Can some one tell me why
@Jose PivotGrid was created after the Exporter and isn’t supported. Feel free to fork the github repo and add the feature though