手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >ExtJS4 动态生成的grid导出为excel示例
ExtJS4 动态生成的grid导出为excel示例
摘要:搜索了蛮久,找到一些例子,因为我是初学者的缘故大多不知道怎么使用。。研究了一下那个源码,搞到现在终于实现了基本的下载。解决了一个表格不能重复...

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

研究了一下那个源码,搞到现在终于实现了基本的下载。解决了一个表格不能重复下载的小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随意导出,并且支持对定制字段的表格导出,即导出表格显示的列

效果图在这里:

1

2

【ExtJS4 动态生成的grid导出为excel示例】相关文章:

JS动态增删表格行的方法

你的编程语言可以这样做吗?

精通JavaScript的this关键字

JS控制表格隔行变色

JS实现浏览器菜单命令

在JavaScript中使用NaN值的方法

JavaScript中Cookies的相关使用教程

如果文字过长,则将过长的部分变成省略号显示

[JS]点出统计器

javascript动态设置样式style实例分析

精品推荐
分类导航