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

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

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

下载地址:点我哦 ^-^

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

<script src="XXX/export-all.js" type="text/javascript"></script>;

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用ExtJS 4.2.1的完整例子,可以将Grid表格导出Excel文件: ``` Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', 'Ext.ux.exporter.Exporter' ]); Ext.onReady(function() { // 模拟数据 var data = []; for (var i = 0; i < 20; i++) { data.push({ name: 'User ' + i, email: 'user' + i + '@example.com', phone: '555-' + Ext.Number.randomInt(1000, 9999) }); } // 创建数据模型 Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'email', 'phone'] }); // 创建数据源 var store = Ext.create('Ext.data.Store', { model: 'User', data: data, proxy: { type: 'memory', reader: { type: 'json', root: 'data' } } }); // 创建Grid表格 var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], width: 400, height: 200, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ xtype: 'button', text: 'Export to Excel', handler: function() { // 导出Excel Ext.ux.exporter.Exporter.exportGrid(grid, 'Excel', { title: 'User List' }); } }] }, { xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }] }); // 渲染Grid表格 Ext.create('Ext.container.Viewport', { layout: 'fit', items: [grid] }); }); ``` 在上面的代码中,我们首先定义了一个模拟数据数组,然后创建了一个数据模型和一个数据源。接下来,我们创建了一个Grid表格,将数据源绑定到该表格中,并添加了一个工具栏和一个分页工具栏。在工具栏中,我们添加了一个按钮,当用户单击该按钮时,将调用Ext.ux.exporter.Exporter.exportGrid函数将Grid表格导出Excel文件。 需要注意的是,我们使用了Ext.ux.exporter.Exporter类来执行导出操作。该类是ExtJS的一个扩展,需要在应用程序中明确声明。在本例中,我们使用了Ext.require函数来加载必需的类和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值