首頁  >  文章  >  web前端  >  ExtJS4 動態產生的grid匯出為excel範例_extjs

ExtJS4 動態產生的grid匯出為excel範例_extjs

WBOY
WBOY原創
2016-05-16 16:50:321851瀏覽

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

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

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

1.下載需要用到js程式碼,我已經上傳 

2.在你的html檔案中加入引用,路徑問題自己注意下,以下是我的路徑

複製程式碼 程式碼如下:

;

3.在你要用到的JS程式碼的Ext.onReady()的開始加上
複製程式碼 程式碼如下:

Ext.Loader.setConfig({ enable

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行,加了兩句話複製程式碼

程式碼如下:

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


以上2行程式碼進行一些初始化,否則excel每次產生因為沒有清空之前的資料導致格式錯誤

經過以上的簡單修改已經可以對一個grid隨意導出,並且支持對定製字段的表格導出,即導出表格顯示的列ExtJS4 動態產生的grid匯出為excel範例_extjs
效果圖在這裡: ExtJS4 動態產生的grid匯出為excel範例_extjs  
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn