前段时间做了两个项目,用到了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个叠加的效果图,不能随意更换成一个图片,否则按钮放在上面的效果就没有了。

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名称是有要求的

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过程中总结的经验,以备不时之需~~~~~~~

Extjs4.2纯前台导出Excel总结的更多相关文章

  1. 无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南

    JSExcelXML 使用指南 先来个效果预览 a.前端显示 b.导出excel效果 表头部分 表尾部分 1.功能描述 JsExcelXml 采用js生成excel中可显示的xml格式文本,将输出文本 ...

  2. extjs4 前台导出grid数据 生成excel,数据量大后台无法接收到数据

    最近做的一个web项目使用的是extsj4 框架,需要一个导出excel功能,通过extjs4 自带的导出方法实现.在前台生成excel的代码,form提交传递到后台输出.前台grid数据超过1000 ...

  3. 关于导出Excel

    Asp.Net 在刚毕业那会,做项目全是服务器控件.导出Excel的代码也很简单,在button触发后台事件后,后台生成一个excel文件,然后读取成字节,输出到客户端. Response.AddHe ...

  4. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  5. [转]Java中导入、导出Excel

    原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...

  6. 导出Excel通用工具类

    导出Excel的两种方法: 一,POI 导入poi包 poi-3.11-beta3-20141111.jar /** * */ package com.car.ots.mpckp.utils; imp ...

  7. thinkphp导入导出excel表单数据

    在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...

  8. ASP.NET MVC导出excel(数据量大,非常耗时的,异步导出)

    要在ASP.NET MVC站点上做excel导出功能,但是要导出的excel文件比较大,有几十M,所以导出比较费时,为了不影响对界面的其它操作,我就采用异步的方式,后台开辟一个线程将excel导出到指 ...

  9. asp.net mvc4使用NPOI 数据处理之快速导出Excel文档

    一.背景 在之前做的小项目里有一需求是:要求将一活动录入的数据进行统计,并以excel表格形式导出来,并且对表格格式要求并不高. 二.问题分析 鉴于用户只要求最终将数据库中的数据导出excel,对于格 ...

随机推荐

  1. Struts2配置国际化资源

    1. 国际化的目标 1). 如何配置国际化资源文件 I. Action 范围资源文件: 在Action类文件所在的路径建立名为 ActionName_language_country.properti ...

  2. iOS--浅谈iOS沙盒目录

    原文地址:http://blog.csdn.net/wzzvictory/article/details/18269713 出于安全考虑,iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文 ...

  3. WEB前端html基础中的各类标签介绍

    2:html中有很多标签,这里列举十几种标签,有它们的用法及在使用过程中的注意事项!

  4. 游戏Loading中的小提示和Loading动画实现

    学习unity1年多了,工作也1年了,因为工作需要,有几个月没接触unity Ngui啦. 学的还是不踏实.继续努力吧.由于下周就要进行新游戏的开发,这几天熟悉熟悉NGUI,今天按照现在公司以前的项目 ...

  5. Object-C中ARC forbids explicit message send of ' ' 错误

    OC中ARC forbids explicit message send of '...'错误 转自CSDN hahahacff 有所整理 ARC forbids explicit message s ...

  6. TSPL学习笔记(3):排序算法练习

    快速排序 快排的详细介绍见,简单的说就是取输入序列中的首元素m,然后将除首元素m以外的其它元素分成两组,小于等于m的一组和大于m的一组.将3组元素组合成输入队列:小于等于m + m + 大于m. 下面 ...

  7. Spring MVC 3.x 基本配置

    WEB-INF/web.xml 例1 <?xml version="1.0" encoding="UTF-8"?> <web-app xmln ...

  8. Maven简介

    转载地址:http://www.cnblogs.com/itech/archive/2011/11/01/2231837.html Ant是软件构建工具,Maven的定位是软件项目管理和理解工具.Ma ...

  9. 3.1 关系数据库标准语言SQL综述

    一.SQL语言的特点 SQL结构查询语言 1.综合统一: 2.高度非过程化:不需要指定存储路径 3.面向集合的操作方式 4.以同一种语法提供两种使用方式:独立语言.嵌入式语言 5.语言简单,易学易用 ...

  10. php base64编码和urlencode

    base64编码 加密 base64_encode($str); 解密 base64_decode(base64_encode($str)); urlencode和base64混合使用 functio ...