`
jiaohougenyang
  • 浏览: 6547 次
文章分类
社区版块
存档分类
最新评论

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
分享到:
评论

相关推荐

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

    本文将深入探讨如何在ExtJS 4.x版本中实现数据网格(Grid)到Excel的导出功能。这是一项非常实用的技能,因为用户往往需要将大量数据从Web界面导出到常见的电子表格格式,如Excel,以便进一步分析和处理。 首先,要...

    extjs grid数据导出excel文件

    本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常涉及到以下几个步骤: 1. **获取Grid数据**:在EXTJS中,Grid的数据存储在Store对象中。要...

    Extjs3.x入门学习

    这可能是全面的ExtJS 3.x教程,涵盖了从基础到进阶的所有内容,包括组件体系、布局管理、数据绑定、AJAX通信、事件处理等。 通过深入学习以上知识点,你将能够熟练地运用ExtJS 3.x来开发功能丰富的Web应用。在实际...

    Extjs4前台前台grid导出excel

    在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...

    extjs3.x 官方示例以及chm版api

    1. **组件体系**:ExtJS 3.x 提供了一个组件化的UI框架,包括各种基础和复杂组件如表格(Grid)、面板(Panel)、窗口(Window)、按钮(Button)等。这些组件可以灵活组合,创建出功能丰富的用户界面。 2. **数据...

    Extjs4.x导出Excel

    看了网上很多报表demo后, 感觉狠不够详细,有鉴于此,本人特开一帖进行了细解,祥见本人博客或http://my.oschina.net/yexingqianli/blog/170434 ,望批评指正,多多交流为善

    Extjs4 grid 导出为Excel

    Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 &lt;link href='...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域,特别是使用ExtJS框架进行界面设计时,文件上传功能是必不可少的一部分。然而,随着ExtJS版本的更新,原有的多文件上传组件可能不再兼容...

    ExtJs grid导出Excel

    当需要将Grid中的数据导出到Excel时,可以采用两种方法,这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一:使用XLSX.js库** XLSX.js是一个JavaScript库,能够方便地读取和写入Excel文件。在ExtJs中,你...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...

    ExtJS2.X 版本app

    ExtJS2.X 版本app 这个版本目前找不到了噢

    ExtJS 3.x中文API

    4. **表单(Forms)**:ExtJS提供了强大的表单创建和处理功能,包括各种输入控件、验证规则以及远程提交能力。 5. **网格(Grids)**:网格组件是展示和操作大量数据的重要工具,支持分页、排序、过滤、编辑等功能...

    ExtJS3.x 中文API CHM 格式

    ExtJS3.x 中文帮助文档,是 CHM 格式的,方便阅读和查询。本人正在使用,效果不错,共享出来,方便大家。

    extjs4导出excel

    "extjs4导出excel"的功能就是实现了这个需求,让用户能够在ExtJS 4应用中方便地导出表格数据到Excel文件。 在ExtJS 4中实现数据导出至Excel通常涉及以下几个关键步骤: 1. **数据收集**:首先,你需要收集要导出的...

    ExtJS 4.X 中文Api CHM

    Ext JS 4.X 中文API,不过有些地方不是很好,显示的有点慢!

    Ext Grid 导出Excel

    总结来说,"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程,涉及到的主要技术有Ext JS的Grid和Store组件,以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...

    EXTJS grid导出EXCEL文件

    4. **源码使用**:提到“源码可以直接导入MYECLIPSE使用”,这意味着提供的是一个实际的代码示例,你可以直接在MyEclipse(一个流行的Java集成开发环境)中打开并运行,以便学习和理解如何实现EXTJS Grid到Excel的...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...

    ExtJS4.x中文API

    extjs4.x中文api 实用比较方便 。

Global site tag (gtag.js) - Google Analytics