快捷導(dǎo)航

ExtJS4 動(dòng)態(tài)生成的grid導(dǎo)出為excel示例

更新時(shí)間：2014年05月02日 10:01:14 作者：

解決了一個(gè)表格不能重復(fù)下載的小BUG，一個(gè)使用grid初始化發(fā)生的BUG,需要的朋友可以參考下

搜索了蠻久，找到一些例子，因?yàn)槲沂浅鯇W(xué)者的緣故大多不知道怎么使用。。

研究了一下那個(gè)源碼，搞到現(xiàn)在終于實(shí)現(xiàn)了基本的下載。解決了一個(gè)表格不能重復(fù)下載的小BUG，一個(gè)使用grid初始化發(fā)生的BUG

下面記錄一下步驟。說不定下次還有用

1.下載需要用到js代碼，我已經(jīng)上傳

2.在你的html文件中加入引用，路徑問題自己注意下，下面是我的路徑

復(fù)制代碼代碼如下:

3.在你要用到的JS代碼的Ext.onReady()的開始加上

復(fù)制代碼代碼如下:

 
Ext.Loader.setConfig({ enabled: true }); 
Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter'); 
Ext.require([ 
'Ext.ux.exporter.Exporter' 
]); 

設(shè)置命名空間。。注意路徑

4.在代碼里面使用，在你需要下載功能的grid處合適的地方加入

復(fù)制代碼代碼如下:

 
xtype: 'exporterbutton', 
// store: store 
component: Ext.getCmp('gird_a') 

這是兩種初始化excel的方式，一種用store初始化，使用store的fields和data，因?yàn)槲业膕tore中的fields名字是英文，導(dǎo)出來的列名是英文所以我沒有使用這種，而是直接用grid進(jìn)行初始化。

下面說下在別人的代碼基礎(chǔ)上我修改的地方

1.在exporter.js第40行，改成了

復(fù)制代碼代碼如下:

var columns = Ext.Array.filter(grid.columnManager.columns,

原來的代碼在第一個(gè)參數(shù)那里是grid.columns,后來我發(fā)現(xiàn)動(dòng)態(tài)生成的grid在reconfigure之后columns放在columnManager.columns里，所以這么改

2.在workbook.js中77.78行，加了兩句話

復(fù)制代碼代碼如下:

 
this.styles=[]; 
this.worksheets=[]; 

以上2行代碼進(jìn)行一些初始化，否則excel每次生成因?yàn)闆]有清空之前的數(shù)據(jù)導(dǎo)致格式錯(cuò)誤

經(jīng)過以上的簡單修改已經(jīng)可以對(duì)一個(gè)grid隨意導(dǎo)出,并且支持對(duì)定制字段的表格導(dǎo)出，即導(dǎo)出表格顯示的列

效果圖在這里: