ext的grid导出为excel 方法(转)
Extjs 2010-10-08 09:25:20 阅读82 评论0 字号:大中小 订阅
老外的方法:
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:
1/**
2 * @author qinjinwei
3 *
4 * time: 2008-7-24 20:28:02
5 */
6var idTmr = "";
7Ext.ux.Grid2Excel = {
8
9 Save2Excel : function(grid)
10 {
11 var cm = grid.getColumnModel();
12 var store = grid.getStore();
13
14 var it = store.data.items;
15 var rows = it.length;
16
17 var oXL = new ActiveXObject("Excel.application");
18 var oWB = oXL.Workbooks.Add();
19 var oSheet = oWB.ActiveSheet;
20
21 for (var i = 0; i < cm.getColumnCount(); i++) {
22
23 if (!cm.isHidden(i)) {
24 oSheet.Cells(1, i + 1).value = cm.getColumnHeader(i);
25 }
26
27 for (var j = 0; j < rows; j++) {
28 r = it[j].data;
29 var v = r[cm.getDataIndex(i)];
30 var fld = store.recordType.prototype.fields.get(cm.getDataIndex(i));
31 if(fld.type == 'date')
32 {
33 v = v.format('Y-m-d');
34 }
35
36 oSheet.Cells(2 + j, i + 1).value = v;
37 }
38 }
39 oXL.DisplayAlerts = false;
40 oXL.Save();
41 oXL.DisplayAlerts = true;
42 oXL.Quit();
43 oXL = null;
44 idTmr = window.setInterval("Cleanup();",1);
45 }
46};
47function Cleanup() {
48 window.clearInterval(idTmr);
49 CollectGarbage();
50};
51
Demo :
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
6 <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
7 <script type="text/javascript" src="./ext/adapter/ext/ext-base.js">
8 </script>
9 <script type="text/javascript" src="./ext/ext-all-debug.js">
10 </script>
11 <script type="text/javascript" src="grid2excel.js">
12 </script>
13 </head>
14 <body>
15 <script type="text/javascript">
16 Ext.onReady(function(){
17
18 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']];
19
20 var store = new Ext.data.SimpleStore({
21 fields: [{
22 name: 'company'
23 }, {
24 name: 'price',
25 type: 'float'
26 }, {
27 name: 'change',
28 type: 'float'
29 }, {
30 name: 'pctChange',
31 type: 'float'
32 }, {
33 name: 'lastChange',
34 type: 'date',
35 dateFormat: 'n/j h:ia'
36 }]
37 });
38 store.loadData(myData);
39
40 // create the Grid
41 var grid = new Ext.grid.GridPanel({
42 id: 'static-grid',
43 store: store,
44 renderTo: 'grid-example',
45 columns: [{
46 id: 'company',
47 header: "Company",
48 width: 160,
49 sortable: true,
50 dataIndex: 'company'
51 }, {
52 header: "Price",
53 width: 75,
54 sortable: true,
55 //renderer: 'usMoney',
56 dataIndex: 'price'
57 }, {
58 header: "Change",
59 width: 75,
60 sortable: true,
61 dataIndex: 'change'
62 }, {
63 header: "% Change",
64 width: 75,
65 sortable: true,
66 dataIndex: 'pctChange'
67 }, {
68 header: "Last Updated",
69 width: 85,
70 sortable: true,
71 renderer: Ext.util.Format.dateRenderer('m/d/Y'),
72 dataIndex: 'lastChange'
73 }],
74 //stripeRows: true,
75 //autoExpandColumn: 'company',
76 height: 350,
77 width: 600,
78 title: 'Array Grid',
79 bbar: new Ext.Toolbar({
80 buttons: [{
81 text: '????Excel',
82 tooltip: '????Excel',
83 handler: onItemClick // °???????
84 }]
85 })
86 });
87
88 function onItemClick(item){
89
90 Ext.ux.Grid2Excel.Save2Excel(grid);
91 }
92
93 //grid.render('grid-example');
94 //grid.getSelectionModel().selectFirstRow();
95 });
96 </script>
97 <div id="grid-example">
98 </div>
99 </body>
100</html>
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:
1/**
2 * @author qinjinwei
3 *
4 * time: 2008-7-24 20:28:02
5 */
6var idTmr = "";
7Ext.ux.Grid2Excel = {
8
9 Save2Excel : function(grid)
10 {
11 var cm = grid.getColumnModel();
12 var store = grid.getStore();
13
14 var it = store.data.items;
15 var rows = it.length;
16
17 var oXL = new ActiveXObject("Excel.application");
18 var oWB = oXL.Workbooks.Add();
19 var oSheet = oWB.ActiveSheet;
20
21 for (var i = 0; i < cm.getColumnCount(); i++) {
22
23 if (!cm.isHidden(i)) {
24 oSheet.Cells(1, i + 1).value = cm.getColumnHeader(i);
25 }
26
27 for (var j = 0; j < rows; j++) {
28 r = it[j].data;
29 var v = r[cm.getDataIndex(i)];
30 var fld = store.recordType.prototype.fields.get(cm.getDataIndex(i));
31 if(fld.type == 'date')
32 {
33 v = v.format('Y-m-d');
34 }
35
36 oSheet.Cells(2 + j, i + 1).value = v;
37 }
38 }
39 oXL.DisplayAlerts = false;
40 oXL.Save();
41 oXL.DisplayAlerts = true;
42 oXL.Quit();
43 oXL = null;
44 idTmr = window.setInterval("Cleanup();",1);
45 }
46};
47function Cleanup() {
48 window.clearInterval(idTmr);
49 CollectGarbage();
50};
51
Demo :
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
6 <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
7 <script type="text/javascript" src="./ext/adapter/ext/ext-base.js">
8 </script>
9 <script type="text/javascript" src="./ext/ext-all-debug.js">
10 </script>
11 <script type="text/javascript" src="grid2excel.js">
12 </script>
13 </head>
14 <body>
15 <script type="text/javascript">
16 Ext.onReady(function(){
17
18 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']];
19
20 var store = new Ext.data.SimpleStore({
21 fields: [{
22 name: 'company'
23 }, {
24 name: 'price',
25 type: 'float'
26 }, {
27 name: 'change',
28 type: 'float'
29 }, {
30 name: 'pctChange',
31 type: 'float'
32 }, {
33 name: 'lastChange',
34 type: 'date',
35 dateFormat: 'n/j h:ia'
36 }]
37 });
38 store.loadData(myData);
39
40 // create the Grid
41 var grid = new Ext.grid.GridPanel({
42 id: 'static-grid',
43 store: store,
44 renderTo: 'grid-example',
45 columns: [{
46 id: 'company',
47 header: "Company",
48 width: 160,
49 sortable: true,
50 dataIndex: 'company'
51 }, {
52 header: "Price",
53 width: 75,
54 sortable: true,
55 //renderer: 'usMoney',
56 dataIndex: 'price'
57 }, {
58 header: "Change",
59 width: 75,
60 sortable: true,
61 dataIndex: 'change'
62 }, {
63 header: "% Change",
64 width: 75,
65 sortable: true,
66 dataIndex: 'pctChange'
67 }, {
68 header: "Last Updated",
69 width: 85,
70 sortable: true,
71 renderer: Ext.util.Format.dateRenderer('m/d/Y'),
72 dataIndex: 'lastChange'
73 }],
74 //stripeRows: true,
75 //autoExpandColumn: 'company',
76 height: 350,
77 width: 600,
78 title: 'Array Grid',
79 bbar: new Ext.Toolbar({
80 buttons: [{
81 text: '????Excel',
82 tooltip: '????Excel',
83 handler: onItemClick // °???????
84 }]
85 })
86 });
87
88 function onItemClick(item){
89
90 Ext.ux.Grid2Excel.Save2Excel(grid);
91 }
92
93 //grid.render('grid-example');
94 //grid.getSelectionModel().selectFirstRow();
95 });
96 </script>
97 <div id="grid-example">
98 </div>
99 </body>
100</html>