ExtJS4动态生成Grid导出Excel实现方法

搜索了许多相关案例后，大多数新手依然不清楚如何将这些示例应用到自己的项目中。通过深入分析源码，我花费了几乎一整夜的时间，终于成功实现了最基本的导出下载功能。与此同时，还修复了两个常见问题：一是重复下载表格时会报错，二是使用 Grid 初始化时出现的 Bug。下面我将完整记录整个配置过程，方便日后复用。

第一步，下载所需的核心 JS 文件——我已经提前打包整合完成。第二步，在你的 HTML 文件中正确引入文件，务必确认路径无误。我的引用示例是这样的：

第三步，在 Ext.onReady() 的起始位置添加以下代码，用于设置命名空间和模块路径：

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

第四步，实际调用非常简单。在需要导出功能的 Grid 配置中加入 exporterbutton 组件：

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

这里提供两种初始化方式：一种是通过 store 传递数据，利用 store 中的 fields 和 data 生成 Excel 文件；另一种则直接绑定 Grid 组件。由于我的 store 中字段名全部是英文，导出后列名也变为英文，因此我选择了第二种方式——直接绑定 Grid 对象。

接下来介绍我对原始代码所做的具体修改。

第一个修改：在 exporter.js 的第 40 行，调整了获取 columns 的方式。原始写法为 grid.columns，但我发现动态生成 Grid 后，reconfigure 会将 columns 存储在 grid.columnManager.columns 中，因此修改为：

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

第二个修改：在 workbook.js 的第 77、78 行新增了两行初始化代码，解决了每次生成 Excel 时未清空历史数据导致的格式错误问题：

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

经过上述简单的调整，现在任何 Grid 都能轻松导出，并且支持自定义列——即导出的是表格当前显示的列，而非所有隐藏列。

效果图如下：