`
kimmking
  • 浏览: 535608 次
  • 性别: Icon_minigender_1
  • 来自: 中华大丈夫学院
社区版块
存档分类
最新评论

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

    博客分类:
  • ext
阅读更多
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>

分享到:
评论
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’为空或不是对象啊?麻烦帮我下哈!

相关推荐

Global site tag (gtag.js) - Google Analytics