ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)

需要将ExtJS Grid 导出 Excel 的同学可以试一试这个插件  是从官方论坛淘来的

 

我自己做了些修改和扩展

 

用法很简单

 

引入 bootstrap.js 和压缩包里的 export-all.js 就可以使用了  

 

具体可以参考 main.js  (下面是定义Grid的时候 指定一个toolbar 为 xtype: 'exporterbutton')

 

 height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true
            },
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
						    xtype: 'exporterbutton',
						  store: myStore

                            //一下两项配置  已在Buttion.js中 配置了默认路径 不需要重复指定
                            //swfPath: './downloadify.swf',
                            //downloadImage: './download.png',

                            //这里可以根据当表格 给 定制导出的文件名
                            //downloadName:'导出的Excel 名字'
						}
                    ]
                }
            ]

 

 

 

    store为Grid 的store     

 

 

    ps: 想看效果 请放到Tomcat之类的服务器上  不要本地新建个HTML...

 

 

   ExtJS4.1 rc2  Ext.XTemplate  有点改动  重新修改了下

 

评论

17 楼 jre 2012-06-27  

northc 写道

jre 写道

northc 写道

jre 写道

为什么我运行你的demo，toolbar上的按钮名字是Descargar呢？text:'导出excel'这句没起作用啊，怎么能改button的名字呢？

是的  嗯   其实那是一个图片  ..  目前的解决方法就是自己做个图片  放上去  呵呵.. 注意下图片大小就没有什么问题的   (图片你应该可以找到的 就在压缩包里面)

多谢，这个控件很好用，要是button按钮能自定义就完美了

放到其他按钮上 是不行的  因为这个导出插件是基于一个Flash的导出类库Downloadify
不停地闪和图片消失的时候我也遇到过  可能是你的图片和原图片大小不一样导致的  因为原图片会做成动态的效果  是有两个层的  具体的我也没有深究Downloadify 的源码..  所以 只能是通过自己做图片这种方式   呵呵  其实很容易做的   ..  (也可能有更好的解决方式,但是对于Downloadify 来说 图片是必须有的)

OK,谢谢您的解答！

16 楼 northc 2012-06-26  

jre 写道

northc 写道

jre 写道

为什么我运行你的demo，toolbar上的按钮名字是Descargar呢？text:'导出excel'这句没起作用啊，怎么能改button的名字呢？

是的  嗯   其实那是一个图片  ..  目前的解决方法就是自己做个图片  放上去  呵呵.. 注意下图片大小就没有什么问题的   (图片你应该可以找到的 就在压缩包里面)

多谢，这个控件很好用，要是button按钮能自定义就完美了

放到其他按钮上 是不行的  因为这个导出插件是基于一个Flash的导出类库Downloadify
不停地闪和图片消失的时候我也遇到过  可能是你的图片和原图片大小不一样导致的  因为原图片会做成动态的效果  是有两个层的  具体的我也没有深究Downloadify 的源码..  所以 只能是通过自己做图片这种方式   呵呵  其实很容易做的   ..  (也可能有更好的解决方式,但是对于Downloadify 来说 图片是必须有的)

15 楼 jre 2012-06-26  

northc 写道

jre 写道

为什么我运行你的demo，toolbar上的按钮名字是Descargar呢？text:'导出excel'这句没起作用啊，怎么能改button的名字呢？

是的  嗯   其实那是一个图片  ..  目前的解决方法就是自己做个图片  放上去  呵呵.. 注意下图片大小就没有什么问题的   (图片你应该可以找到的 就在压缩包里面)

多谢，这个控件很好用，要是button按钮能自定义就完美了

14 楼 northc 2012-06-25  

jre 写道

为什么我运行你的demo，toolbar上的按钮名字是Descargar呢？text:'导出excel'这句没起作用啊，怎么能改button的名字呢？

是的  嗯   其实那是一个图片  ..  目前的解决方法就是自己做个图片  放上去  呵呵.. 注意下图片大小就没有什么问题的   (图片你应该可以找到的 就在压缩包里面)

13 楼 jre 2012-06-25  

为什么我运行你的demo，toolbar上的按钮名字是Descargar呢？text:'导出excel'这句没起作用啊，怎么能改button的名字呢？

12 楼 sfzx 2012-06-13  

为啥我的 不显示按钮 导入了 2个js

11 楼 a3049967 2012-06-01  

northc 写道

a3049967 写道

northc 写道

a3049967 写道

northc 写道

pp1986 写道

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

有错误提示么? 我项目上现在在用,基于官方论坛插件修改的,我也是新手..

在什么浏览器？如果是IE可以显示 FF不能显示说明你的FF插件太久了

当时 都测过的  IE和chrome  但FF没测..因为客户只用的IE  所以 没有过多的测试兼容性...

我在官网论坛上看到用的是插件~但是我个人也在找方法~我的思路是先取到grid 所有的列，然后把参数传到后台，就是知道怎么取到extjs4 grid 列名

列名?  你可以看看附件里面的源码  这个很好取的

源码名字叫什么？比如examle grid ?

10 楼 northc 2012-05-29  

a3049967 写道

northc 写道

a3049967 写道

northc 写道

pp1986 写道

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

有错误提示么? 我项目上现在在用,基于官方论坛插件修改的,我也是新手..

在什么浏览器？如果是IE可以显示 FF不能显示说明你的FF插件太久了

当时 都测过的  IE和chrome  但FF没测..因为客户只用的IE  所以 没有过多的测试兼容性...

我在官网论坛上看到用的是插件~但是我个人也在找方法~我的思路是先取到grid 所有的列，然后把参数传到后台，就是知道怎么取到extjs4 grid 列名

列名?  你可以看看附件里面的源码  这个很好取的

9 楼 a3049967 2012-05-29  

northc 写道

a3049967 写道

northc 写道

pp1986 写道

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

有错误提示么? 我项目上现在在用,基于官方论坛插件修改的,我也是新手..

在什么浏览器？如果是IE可以显示 FF不能显示说明你的FF插件太久了

当时 都测过的  IE和chrome  但FF没测..因为客户只用的IE  所以 没有过多的测试兼容性...

我在官网论坛上看到用的是插件~但是我个人也在找方法~我的思路是先取到grid 所有的列，然后把参数传到后台，就是知道怎么取到extjs4 grid 列名

8 楼 northc 2012-05-29  

a3049967 写道

northc 写道

pp1986 写道

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

有错误提示么? 我项目上现在在用,基于官方论坛插件修改的,我也是新手..

在什么浏览器？如果是IE可以显示 FF不能显示说明你的FF插件太久了

当时 都测过的  IE和chrome  但FF没测..因为客户只用的IE  所以 没有过多的测试兼容性...

7 楼 a3049967 2012-05-29  

northc 写道

pp1986 写道

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

有错误提示么? 我项目上现在在用,基于官方论坛插件修改的,我也是新手..

在什么浏览器？如果是IE可以显示 FF不能显示说明你的FF插件太久了

6 楼 northc 2012-05-29  

pp1986 写道

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

有错误提示么? 我项目上现在在用,基于官方论坛插件修改的,我也是新手..

5 楼 pp1986 2012-05-29  

确认可以用吗？我用的EXT4.0.7版本，按照示例加载，放到tabr里或者pannel里，什么也看不到、

4 楼 meskin 2012-04-25  

新问题 是 我将Export button 加到girdpanel的tbar里面 不知道为什么就是不显示
放在其他容器里面都可以显示

3 楼 meskin 2012-04-25  

Ext.define("Ext.ux.exporter.excelFormatter.ExcelFormatter", {
    extend: "Ext.ux.exporter.Formatter",
    uses: [
        "Ext.ux.exporter.excelFormatter.Cell",
        "Ext.ux.exporter.excelFormatter.Style",
        "Ext.ux.exporter.excelFormatter.Worksheet",
        "Ext.ux.exporter.excelFormatter.Workbook"
    ],
    contentType: 'data:application/vnd.ms-excel;base64,',
    extension: "xls",

    format: function(store, config) {
      var workbook = new Ext.ux.exporter.excelFormatter.Workbook(config);
      workbook.addWorksheet(store, config || {});

      return workbook.render();
    }
});

调试时发现这一段有问题 当第二次的文件保存时候 新建出来的workbook 里面的worksheets 不是空的

然后发现你的Button.js 好像作了一些修改 覆盖原版的button.js 就好了

2 楼 northc 2012-04-24  

meskin 写道

为什么我第一次导入Excel 就可以 后面导入的时候 就开始出现格式错误的问题

你用的哪个版本的ExtJS ?  office是哪个版本 ?  office 2007虽然提示格式不正确 但是还是能正常打开

1 楼 meskin 2012-04-24  

为什么我第一次导入Excel 就可以 后面导入的时候 就开始出现格式错误的问题