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行，加了两句话

复制代码代码如下: