View Full Version : How we can have Export Grid data to Excel / PDF

3 Oct 2012, 10:22 PM
I am currently using ExtJs 4.1.1 version.

I have checked all possible ways to find out Export to Excel functionality, but i didn't find the exact solution on this.

Can you please suggest , Is there any provision to Export the Grid data into Excel , PDF using ExtJs ?
if yes, Please pass me the correct URL so that I can make my code changes.

3 Oct 2012, 11:49 PM
Hi Atul,

See this plugin for Exporting grid data into Excel Sheet -

4 Oct 2012, 1:53 AM
Thanks for the help.
I have already gone through this plugin. This was very old one. I thought , currently with Ext 4.1.2 , if we have some Good plugin with more fetures .

Please suggest , is this the only way to Export to excel ?

4 Oct 2012, 2:36 AM
Export store to Excel (http://www.sencha.com/forum/showthread.php?136598-Export-store-to-Excel) -> Ext.ux.Exporter (https://github.com/iwiznia/Ext.ux.Exporter)?

4 Oct 2012, 4:36 AM
I have checked this , here I guess they are using Ext 3 , which is very old version.

Is there any plugin which is using Extjs 4 and above ?

also plz give me some hit so that i will try to develop it at my end.

4 Oct 2012, 4:47 AM
I have checked this , here I guess they are using Ext 3 , which is very old version.
You are wrong.

4 Oct 2012, 5:05 AM
Can you please correct me ?

I have downloaded from

and here I found that they are using Ext 3.0.0

Also I want to export to PDF as well.

Please correct me if I missed anything here.

4 Oct 2012, 5:10 AM
Export store to Excel (http://www.sencha.com/forum/showthread.php?136598-Export-store-to-Excel) -> Ext.ux.Exporter (https://github.com/iwiznia/Ext.ux.Exporter)?
https://github.com/iwiznia/Ext.ux.Exporter (https://github.com/iwiznia/Ext.ux.Exporter) not https://github.com/edspencer/Ext.ux.Exporter (https://github.com/edspencer/Ext.ux.Exporter)

4 Oct 2012, 5:24 AM
ok , thanks for the correction .

Let me check this by implementing it.
1] Is it work for PDF as well ?

5 Dec 2012, 5:45 PM
I have try the example.There are something wrong "c is not a constructor".The Ext.ux.exporter.Button is not right.Can you correct it?

* @class Ext.ux.Exporter.Button
* @extends Ext.Component
* @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.Component",
alias: "widget.exporterbutton",
html: '<p></p>',
config: {
swfPath: '/flash/downloadify.swf',
downloadImage: '/images/ext_reports/download.png',
width: 62,
height: 22,
downloadName: "download"

constructor: function(config) {
config = config || {};

Ext.ux.exporter.Button.superclass.constructor.call(this, config);

var self = this;
this.on("afterrender", function() { // We wait for the combo to be rendered, so we can look up to grab the component containing it
self.setComponent(self.store || self.component || self.up("gridpanel") || self.up("treepanel"), config);

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

setDownloadify: function(config) {
var self = this;
filename: function() {
return self.getDownloadName() + "." + Ext.ux.exporter.Exporter.getFormatterByName(self.formatter).extension;
data: function() {
return Ext.ux.exporter.Exporter.exportAny(self.component, self.formatter, config);
transparent: false,
swf: this.getSwfPath(),
downloadImage: this.getDownloadImage(),
width: this.getWidth(),
height: this.getHeight(),
transparent: true,
append: false

Garry Hawkins
5 Dec 2012, 7:15 PM
Do you find codes that works in extjs 4.1.1?

5 Dec 2012, 7:20 PM
https://github.com/iwiznia/Ext.ux.Exporter (https://github.com/iwiznia/Ext.ux.Exporter) is the best project recently,but there is not example and may have a little bug.

8 Apr 2014, 3:02 PM
This is the best version of exporter I've found, works with 4.1

Pretty much the same as the one mentioned above I think

19 May 2014, 10:04 PM
How we can have Export data to Excel / Csv in Ext.js version 4? please provide example also