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

本人菜鸟一枚,看了网上很多例子,操作均不够具体,且大都用的是同一个源文件(http://blog.csdn.net/lc448986375/article/details/8205362),想来定是受了原博主的毒害不浅^_^。有鉴于此,本人特此做一较为详细的解说,望批评指正,多多交流为善

1.下载并解压文件夹 ExtToExcel.zip;(csdn资源几次传不上去,开源中国貌似又不支持,无奈用了51)

下载地址:点我哦 ^-^

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

;

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

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

4.到这里才是在你的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上配置的时候很不稳定,动辄导致导出功能失效,若有必要可注释掉它。(lz项目中较多的用到了grid,只在第一个上可用,后面的皆不可用)

downloadName: '水表年/月-年报',  


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

你可能感兴趣的:(ux,javascript)