Extjs4.2纯前台导出Excel总结

前段时间做了两个项目，用到了Extjs4.2纯前台导出Excel，遇到很多的问题，从网上也找了很多资料，在这里总结一下，做一个记录：

使用方法：

1.下载extexcel文件包，这里可以下载http://download.csdn.net/detail/cui198711/8244017

（设置积分实属无奈：因自己太懒，csdn已没有积分了－。－！）

2.将该包导出项目中（不要随意改变包中的目录结构）

3.在需要导出数据的gridpanel下的dockedItems中引用Button即可，如

　　　　　　dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                Ext.create('Ext.ux.exporter.Button', {
                                    text: "导出 Excel"
                                })
                            ]
                        }

　　　　　　]

　这里有几个注意事项，也是我在项目中遇到的问题，需要特别注意：

1.包中的exportExcel.png图片为4个叠加的效果图，不能随意更换成一个图片，否则按钮放在上面的效果就没有了。

Extjs4.2纯前台导出Excel总结

2.网上一般找的extexcel包是有bug的，如第一次导出是没问题的能打开，第二次导出的就打不开了，这个问题需要稍做修改：找到extexcel\exporter\excelFormatter\Workbook.js

在第75行 Ext.apply(this, config) 下面插入以下两句：

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

即可解决。

3.引用的Button位置必须在gridpanel下才可使用，否则会在component.is里报component为空的错，如果真有需要把Button放到gridpanel外面，也是可以的，当然需要做一些修改：

　　setComponent: function (component, config) {
        this.component = component;
        //this.store = !component.is ? component : component.getStore(); // only components or stores, if it doesn't respond to is method, it's a store
       // 修改这里
       if(component!=null）{
           this.store = !component.is ? component : component.getStore();
       }
        config.component = this.component;
        config.store = this.store;
        this.setDownloadify(config);
     }

除此之外，需要在Button的容器渲染事件中，手动的给Button赋于component，这样就可以完美解决。

4.要导出的表名称（gridpanel的title）长度不能多于31个字符，也不能包含“\”、"/"、"?"、"*"、"["或"]"特殊字符，否则导出的Excel无法打开，会报错，原因是Excel的sheet页会把表名称

当sheet的名称来用，而sheet名称是有要求的

Extjs4.2纯前台导出Excel总结

5.根据Button里构造函数中的这句话

　　self.setComponent(self.store || self.component || self.up("gridpanel") || self.up("treepanel"), config);

以为应该是支持treepanel的，但是根据我的测试如果是treepanel，在Worksheet.js中

buildRows: function () {
var rows = [];

　 // 如果是treepanel以下代码无法执行
    this.store.each(function (record, index) {
      rows.push(this.buildRow(record, index));
    }, this);
    return rows;
}

以上红色代码段是无法执行的，原因是因为TreeStore没有each方法。当然如果在这里修改一下让他执行应该也是可以导出的，因为时间原因没有修改，如果有需要的话自行修改吧。

秒客网

Extjs4.2纯前台导出Excel总结

相关文章