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 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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
1.PHP简介
2006/10/09 PHP
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php 前一天或后一天的日期
2008/06/28 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP 微信支付类 demo
2015/11/30 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
Gird事件机制初级读本
2007/03/10 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
JS hashMap实例详解
2016/05/26 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python使用append合并两个数组的方法
2015/04/28 Python
Django Highcharts制作图表
2016/08/27 Python
Python制作Windows系统服务
2017/03/25 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
什么是servlet
2012/05/08 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
党支部对转正的意见
2015/06/02 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
Python代码实现双链表
2022/05/25 Python