ExtJS4 動態生成的grid導出為excel示例

2019-11-20 20:45:40

字體：大中小

來源：轉載

供稿：網友

搜索了蠻久，找到一些例子，因為我是初學者的緣故大多不知道怎么使用。。

研究了一下那個源碼，搞到現在終于實現了基本的下載。解決了一個表格不能重復下載的小BUG，一個使用grid初始化發生的BUG

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

1.下載需要用到js代碼，我已經上傳

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

復制代碼代碼如下:

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

復制代碼代碼如下:

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

設置命名空間。。注意路徑

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

復制代碼代碼如下:

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

這是兩種初始化excel的方式，一種用store初始化，使用store的fields和data，因為我的store中的fields名字是英文，導出來的列名是英文所以我沒有使用這種，而是直接用grid進行初始化。

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

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

復制代碼代碼如下:

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

原來的代碼在第一個參數那里是grid.columns,后來我發現動態生成的grid在reconfigure之后columns放在columnManager.columns里，所以這么改

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

復制代碼代碼如下: