浏览 2760 次
|
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-07-25
最后修改：2009-01-08
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:
/**
* @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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-10-10
楼主我用啦怎么提示‘type’为空或不是对象啊？麻烦帮我下哈！
|
| 返回顶楼 | |
|
发表时间：2008-10-14
把这几句注释掉看看
if(fld.type == 'date') { v = v.format('Y-m-d'); } |
| 返回顶楼 | |
