ExtJS4 动态生成的grid导出为excel示例


Posted in Javascript onMay 02, 2014

搜索了蛮久,找到一些例子,因为我是初学者的缘故大多不知道怎么使用。。

研究了一下那个源码,搞到现在终于实现了基本的下载。解决了一个表格不能重复下载的小BUG,一个使用grid初始化发生的BUG

下面记录一下步骤。说不定下次还有用

1.下载需要用到js代码,我已经上传 

2.在你的html文件中加入引用,路径问题自己 注意下,下面是我的路径

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

3.在你要用到的JS代码的Ext.onReady()的开始加上
Ext.Loader.setConfig({ enabled: true }); 
Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter'); 
Ext.require([ 
'Ext.ux.exporter.Exporter' 
]);

设置命名空间。。注意路径

4.在代码里面使用,在你需要下载功能的grid处合适的地方加入

xtype: 'exporterbutton', 
// store: store 
component: Ext.getCmp('gird_a')

这是两种初始化excel的方式,一种用store初始化,使用store的fields和data,因为我的store中的fields名字是英文,导出来的列名是英文所以我没有使用这种,而是直接用grid进行初始化。

下面说下在别人的代码基础上我修改的地方

1.在exporter.js第40行,改成了

var columns = Ext.Array.filter(grid.columnManager.columns,

原来的代码在第一个参数那里是grid.columns,后来我发现动态生成的grid在reconfigure之后columns放在columnManager.columns里,所以这么改

2.在workbook.js中77.78行,加了两句话

this.styles=[]; 
this.worksheets=[];

以上2行代码进行一些初始化,否则excel每次生成因为没有清空之前的数据导致格式错误

经过以上的简单修改已经可以对一个grid随意导出,并且支持对定制字段的表格导出,即导出表格显示的列

效果图在这里:
ExtJS4 动态生成的grid导出为excel示例 
ExtJS4 动态生成的grid导出为excel示例 

Javascript 相关文章推荐
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
实例详解Node.js 函数
Jun 10 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
react合成事件与原生事件的相关理解
May 13 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 #Javascript
jquery等待效果示例
May 01 #Javascript
js实现checkbox全选和反选示例
May 01 #Javascript
jquery插件之定时查询待处理任务数量
May 01 #Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 #Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 #Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
幼儿教师研修感言
2014/02/12 职场文书
自行车广告词大全
2014/03/21 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
门市房租房协议书
2014/12/04 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
七个Python必备的GUI库
2021/04/27 Python