【转】 ExtJS4.x Grid导出到Excel(详解)

最新推荐文章于 2025-07-28 12:15:55 发布

zengzp1994

最新推荐文章于 2025-07-28 12:15:55 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs 文章标签： ext grid excel

本文链接：https://blog.youkuaiyun.com/zengzp1994/article/details/84691812

Extjs 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何将ExtJS4.x的Grid数据导出到Excel文件，提供了具体的下载链接和使用步骤。作者指出，一些常见问题如dockItems的位置、包含checkbox的列以及 poi 读取问题在遵循正确步骤时不会出现，同时提醒了一个可能导致导出功能失效的不稳定配置项。

看了网上很多例子，操作均不够具体，且大都用的是同一个源文件（http://blog.youkuaiyun.com/lc448986375/article/details/8205362），想来定是受了原博主的毒害^_^

1.下载并解压文件夹

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

2.htm显示页面导入export-all.js文件,如：

1	`<` `script` `src` `=` `"XXX/export-all.js"` `type` `=` `"text/javascript"` `></` `script` `>;` 并且最好放在导入extjs文件之后。

3.

1 2	`Ext.Loader.setConfig({ enabled:` `true` `});` `Ext.Loader.setPath(` `'Ext.ux.exporter'` `,` `'XXX/exporter'` `);` `//这里是你的路径，一定要配置正确才可以正常使用`

 
  Ext.require([ 
 

 
  'Ext.ux.exporter.Exporter'

]);

 
到这里才是在你的Grid上添加以下代码 
 

 
   dockedItems: [ 
  
   { 
  
   xtype:  
   'toolbar' 
   , 
  
   dock:  
   'top' 
   , 
  
   items: [ 
  
   Ext.create( 
   'Ext.ux.exporter.Button' 
   , { 
  
   component: Ext.getCmp( 
   'grid' 
   ), 
  
   text:  
   "导出 Excel" 
  
   }) 
  
   ] 
  
   } 
  
   ] 
  
至于后面提到的几点注意问题（原文如下： 
1、dockItems必须在grid上，否则将提示没有is方法
2、如果grid中有checkbox将会导致导出的excel文件中内容和表头错位
3、导出的excel文件不能用poi读取，我是在网上看到的代码，我查了些资料，因为头文件信息的问题，所以如果用poi读取会报错，如果有高人可以修改下。当然，如果只是导出，不需要poi导入的话这个足够用了
）我都没有遇到，我相信大家都按照正确的步骤一步步过来是不会有什么大的问题出现的。
    另有以下一项在grid上配置的时候很不稳定，动辄导致导出功能失效，若有必要可注释掉它。