GridPanel to real Excel file(IE5+,Windows,Office)

kimmking

浏览: 547710 次
性别:
来自: 中华大丈夫学院

最近访客更多访客>>

beifengbei08

zfyq124

sosoab

shijun66

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

我的资讯 ( 3)
我的论坛 ( 3531)
我的问答 ( 219)

存档分类

博客分类：

Office Excel Windows EXT IE

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>

分享到：

Ext中使用Word | 解决Ext对于复杂项目加载慢的一个思路

2008-07-25 03:29
浏览 12089
评论(3)
论坛回复 / 浏览 (2 / 2807)
分类:Web前端
查看更多

3 楼 tmq3244286 2012-02-03

代码运行到var oXL = new ActiveXObject("Excel.application"); 的时候
出现： Automation 服务器不能创建对象的错误
请问如何解决

2 楼 kimmking 2008-10-14

把这几句注释掉看看

if(fld.type == 'date')
    {
     v = v.format('Y-m-d');
    }

1 楼 379548695 2008-10-10

楼主我用啦怎么提示‘type’为空或不是对象啊？麻烦帮我下哈！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论