GridPanel to real Excel file(IE5+,Windows,Office)
GridPanel to real Excel file(Only By IE5+,Windows,Office)
What ?
There is only one static function in the object Ext.ux.Grid2Excel ,
You can use it anywhere to convert the data from a gridpanel to a local real excel file.
Where ?
It use a object(ActiveXObject("Excel.application") to create a real excel file,so it works at only windows platform with the office software installed.And then modifying the settings of the IE security to activate the activex may be necessary too.
How ?
Like this:
Ext.ux.Grid2Excel.Save2Excel(grid);
Core Code List and Demo
grid2excel.js:
Demo :
What ?
There is only one static function in the object Ext.ux.Grid2Excel ,
You can use it anywhere to convert the data from a gridpanel to a local real excel file.
Where ?
It use a object(ActiveXObject("Excel.application") to create a real excel file,so it works at only windows platform with the office software installed.And then modifying the settings of the IE security to activate the activex may be necessary too.
How ?
Like this:
Ext.ux.Grid2Excel.Save2Excel(grid);
Core Code List and Demo
grid2excel.js:
/**
* @author qinjinwei
*
* time: 2008-7-24 20:28:02
*/
var idTmr = "";
Ext.ux.Grid2Excel = {
Save2Excel : function(grid)
{
var cm = grid.getColumnModel();
var store = grid.getStore();
var it = store.data.items;
var rows = it.length;
var oXL = new ActiveXObject("Excel.application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
for (var i = 0; i < cm.getColumnCount(); i++) {
if (!cm.isHidden(i)) {
oSheet.Cells(1, i + 1).value = cm.getColumnHeader(i);
}
for (var j = 0; j < rows; j++) {
r = it[j].data;
var v = r[cm.getDataIndex(i)];
var fld = store.recordType.prototype.fields.get(cm.getDataIndex(i));
if(fld.type == 'date')
{
v = v.format('Y-m-d');
}
oSheet.Cells(2 + j, i + 1).value = v;
}
}
oXL.DisplayAlerts = false;
oXL.Save();
oXL.DisplayAlerts = true;
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();",1);
}
};
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
};
Demo :
<!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">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="./ext/ext-all-debug.js">
</script>
<script type="text/javascript" src="grid2excel.js">
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
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']];
var store = new Ext.data.SimpleStore({
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'change',
type: 'float'
}, {
name: 'pctChange',
type: 'float'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
}]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
id: 'static-grid',
store: store,
renderTo: 'grid-example',
columns: [{
id: 'company',
header: "Company",
width: 160,
sortable: true,
dataIndex: 'company'
}, {
header: "Price",
width: 75,
sortable: true,
//renderer: 'usMoney',
dataIndex: 'price'
}, {
header: "Change",
width: 75,
sortable: true,
dataIndex: 'change'
}, {
header: "% Change",
width: 75,
sortable: true,
dataIndex: 'pctChange'
}, {
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
//stripeRows: true,
//autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
bbar: new Ext.Toolbar({
buttons: [{
text: 'µ¼³öExcel',
tooltip: 'µ¼³öExcel',
handler: onItemClick // °´Å¥Ê¼þ
}]
})
});
function onItemClick(item){
Ext.ux.Grid2Excel.Save2Excel(grid);
}
//grid.render('grid-example');
//grid.getSelectionModel().selectFirstRow();
});
</script>
<div id="grid-example">
</div>
</body>
</html>