Export store to Excel

**wiznia** · 21 Jul 2011 6:03 AM

You can put it wherever you want, but you have to specify it to the loader with the setPath method.

Code:

Ext.Loader.setPath('Ext.ux', './src/ux'); // All the Ext.ux.* classes will be searched in ./src/ux

Ext.Loader.setPath('Ext.ux.exporter', './something/exporter'); // Only the Ext.ux.exporter.* classes will be searched in ./something/exporter'

**nuskin** · 21 Jul 2011 10:29 AM

hi Wiznia,

I copied the array-grid example from ext-4.0.2a/examples/grid/ folder and made my own MyExcelExporter.html file under the same directory as the example itself. I added the dockedItems item to the grid object and added Ext.require(['Ext.ux.exporter.*', 'Ext.ux.exporter.excelFormatter.*', 'Ext.ux.exporter.csvFormatter.*']). Yes, I copied all other files to their perspective directories under ext-4.0.2a/examples/ux folder. However, I still get the same problem/error. I am new to this Extjs 4.0.2a framework. So, any help to get this excel-exporter working is really appreciated. Here are the source codes of my MyExcelExporter.html file:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Excel Exporter</title>
<style> body, html {margin:65px; padding: 1px; overflow: auto;} </style>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
</head>

<body>

<div id="grid-place"></div>

<script type="text/javascript">

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

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.ux.exporter.*',
'Ext.ux.exporter.excelFormatter.*',
'Ext.ux.exporter.csvFormatter.*'
]);

Ext.onReady(function() {

Ext.QuickTips.init();

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create a business model
Ext.define('Business', { extend: 'Ext.data.Model', fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]});

// create the data store
var myStore = Ext.create('Ext.data.ArrayStore', {
model: 'Business',
data: myData
});

// create the Grid object
var grid = Ext.create('Ext.grid.Panel', {
title: 'Array Grid',
renderTo: 'grid-example',
height: 350,
width: 600,
store: myStore,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [
{
icon: '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = myStore.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
},
{
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Hold stock';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = myStore.getAt(rowIndex);
alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
}
}
]
}
],
viewConfig: {
stripeRows: true
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [ { xtype: 'exporterbutton'} ]
}
]
});

});
</script>

</body>
</html>

**Ewoq** · 22 Jul 2011 12:10 AM

I solved my problem:

I moved the setPath...

Code:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux.exporter', '/any/Directory');

...into the Exporter.js and then it worked.

Maybe that could help you too nuskin?

Thanks again wiznia

**nuskin** · 22 Jul 2011 5:01 PM

Well, i made some progress; however, i ran into different problem in the Button.js file.

col.on is not a function col.on("show", setLink, me);
Button...2614604 (line 51)

Any idea?

I resolved the "namespace is undefined" problem by explicitly list out as:
Ext.require([
'Ext.ux.exporter.Base64',
'Ext.ux.exporter.Button',
'Ext.ux.exporter.csvFormatter.CsvFormatter',
'Ext.ux.exporter.excelFormatter.ExcelFormatter'
]);

Thanks for helping.

**nuskin** · 25 Jul 2011 12:39 PM

Thanks Wizina and Teemac. I got it worked in Firfox 5.0, but it does not work in IE 7 or IE 8. For IE 7, it got stuck right away, nothing display at all, not even the array grid; for IE 8, the array grid and button show up, but when I click on the button for download or export, a new IE browser instance was launched but no data, just like Teemac discribed in IE 9.

The following source codes will work in Firfox 5.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>

<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
/* shared styles for the ActionColumn icons */
.x-action-col-cell img {
height: 16px;
width: 16px;
cursor: pointer;
}
/* custom icon for the "buy" ActionColumn icon */
.x-action-col-cell img.buy-col {
background-image: url(../shared/icons/fam/accept.gif);
}
/* custom icon for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
background-image: url(../shared/icons/fam/error.gif);
}
</style>
</head>
<body>
<h1>Export an Array Grid to Excel</h1>

<div id="grid-example"></div>
<script type="text/javascript">

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux.exporter', '../ux/exporter');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.exporter.Base64',
'Ext.ux.exporter.Button',
'Ext.ux.exporter.Formatter',
'Ext.ux.exporter.csvFormatter.CsvFormatter',
'Ext.ux.exporter.excelFormatter.Workbook',
'Ext.ux.exporter.excelFormatter.Worksheet',
'Ext.ux.exporter.excelFormatter.Cell',
'Ext.ux.exporter.excelFormatter.Style',
'Ext.ux.exporter.excelFormatter.ExcelFormatter',
'Ext.ux.exporter.Exporter'
]);
Ext.onReady(function() {

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
// create a model for the Business
Ext.define('Business', { extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]});
// create the data store
var myStore = Ext.create('Ext.data.ArrayStore', {
model: 'Business',
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: myStore,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,

dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,

dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
},
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'exporterbutton', text: 'Export-to-Excel'
}]
}]
});
});
</script>
</body>
</html>

**vispiron** · 28 Jul 2011 11:12 PM

Hi,

i include following:

PHP Code:


Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux.exporter', 'ext/examples/ux/exporter');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.toolbar.Paging',
'Ext.ux.exporter.Exporter'
]);

The Script loads but ux/exporter/excelFormatter/Workbook.js give me an Error 500 Internal Server Error?

What can i do?

**Ewoq** · 29 Jul 2011 1:05 AM

What is the exact error message?

Is your directory called ext? or ext-4.0.2?

I think you also need a / in front of your path:

Code:

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux.exporter', '/ext-4.0.2/examples/ux/exporter');

Would be my guess.

**wiznia** · 29 Jul 2011 1:48 AM

mmm An error 500 makes no sense, the exporter doesn't talk to the server in any way. The store does, and the exporter uses its data, so maybe there's an error in the call to the server by the store.

**edspencer** · 29 Jul 2011 4:35 PM

Glad someone revived this old thing

I haven't touched the code in a year or more. Would love to have this come into the framework but finding it hard to find staffing for it at the moment given everything else we need to do.

**wiznia** · 30 Jul 2011 9:56 AM

It's far from ready and it doesn't work with IE...
Besides there are a lot more important things to get fixed.

Export store to Excel

Thread Tools

Search Thread

Display

Error 500

Error 500