ExtJS4.x Grid導出到Excel(詳解)

本人菜鳥一枚,看了網上很多例子,操作均不夠具體,且大都用的是同一個源文件(http://blog.csdn.net/lc448986375/article/details/8205362),想來定是受了原博主的毒害^_^有鑑於此,本人特此做一較爲詳細的解說,望批評指正,多多交流爲善

1.下載並解壓文件夾 ExtToExcel.zip 下載地址:Extjs4導出Excel

2.htm顯示頁面導入export-all.js文件,如:

  1. <scriptsrc="XXX/export-all.js"type="text/javascript"></script>;

3.在要引用的ext.js頭部(Ext.OnReady())前面導入如下文字,

  1. Ext.Loader.setConfig({ enabled: true });

  2. Ext.Loader.setPath('Ext.ux.exporter', 'XXX/exporter'); //這裏是你的路徑,一定要配置正確纔可以正常使用

  1. Ext.require([

  2. 'Ext.ux.exporter.Exporter'

  3. ]);

4.到這裏纔是在你的Grid上添加以下代碼

  1. dockedItems: [

  2. {

  3. xtype: 'toolbar',

  4. dock: 'top',

  5. items: [

  6. Ext.create('Ext.ux.exporter.Button', {

  7. component: Ext.getCmp('grid'),

  8. text: "導出 Excel"

  9. })

  10. ]

  11. }

  12. ]

至於後面提到的幾點注意(原文如下:

1、dockItems必須在grid上,否則將提示沒有is方法

2、如果grid中有checkbox將會導致導出的excel文件中內容和表頭錯位

3、導出的excel文件不能用poi讀取,我是在網上看到的代碼,我查了些資料,因爲頭文件信息的問題,所以如果用poi讀取會報錯,如果有高人可以修改下,當然,如果只是導出,不需要poi導入的話這個足以滿足了

)都沒有遇到,我相信大家都按照正確的步驟一步步過來是不會有什麼大的問題出現的。

另有以下一項在grid上配置的時候很不穩定,動輒導致導出功能失效,若有必要可註釋掉它。(lz項目中較多的用到了grid,只在第一個上可用,後面的皆不可用)

  1. downloadName: '水錶年/月-年報',


下載地址:http://down.51cto.com/data/985208


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章