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>
分享到:
相关推荐
gridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+progressbargridpanel+...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
ExtJS4.1+ASP.NET MVC3+Spring.NET1.3+EF5+SQLite 整合源码,本人整合多日,也算来之不易,需要的可以下载。 原文地址:http://blog.csdn.net/xz2001/article/details/8716541 涉及到以下框架:ExtJS4.1、MVC3、...
扩展的GridPanel,让其分页后保持选择状态
extjs导出excel.Ext中将GridPanel数据导出为Excel的方法。
EXT实例GridPanel. 实现简单的。
gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊
Extnet GridPanel 增行 删行 弹出窗体 页面传值
改变gridpanel的行颜色,以及gridpanel 的表格变色
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
Ext的gridpanel控件二次加载时丢失解决方案
环境:Windows XP sp3、IE 7.0、MS SQL Server 2000、MyEclipse5.5、 Ext 3.2、Tomcat 6.0 使用步骤: 1、下载解压之后,使用IDE打开工程 2、在工程中找到“数据库脚本.sql”文档,然后在查询分析器中生成数据与测试...