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随意导出,并且支持对定制字段的表格导出，即导出表格显示的列

效果图在这里:
 

赞 (0)

相关推荐

  • Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    1.之前在winForm上有看过在选择数据时会将一些数据放在待选框中,而用户可以将想要选择的数据放到备选框中,那么如何用Extjs实现类似功能,我们选择用两个gridPanel来模拟其中的备选框和待选框.如下图所示: 定义代码如下: 复制代码 代码如下: {               xtype:'gridpanel',               multiSelect: true,                id:'staff',                 x: 5,      

  • extjs4 treepanel动态改变行高度示例

    extjs4 treepanel动态改变行高度示例

      复制代码 代码如下: //css代码 .x-row-class{ line-height:30px; } //js代码 },{ text: '技能分配', flex: 1, width:150, dataIndex: 'skillDistribut', sortable: true, renderer:function(value, metaData, record, rowIndex, columnIndex, store){ metaData.tdAttr= "data-qtip='&q

  • 浅谈JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23"}' 经 JSON.parse(str) 得到: Object: age:"23" name:"cpf" _proto_:Object ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常 2.stringify用于从一个对象解析出字符串,例如 var

  • ExtJS4中使用mixins实现多继承示例

    在ExtJS4中使用mixins来实现多继承.具体例子代码如下: 复制代码 代码如下: (function(){ Ext.onReady(function(){ Ext.define('say',{ canSay:function(){ alert("hello"); } }); Ext.define('eat',{ caneat:function(){ alert("eating"); } }); Ext.define("user",{ mix

  • javascript中JSON对象与JSON字符串相互转换实例

    本文实例讲述了javascript中JSON对象与JSON字符串相互转换实现方法.分享给大家供大家参考.具体如下: <script type="text/javascript"> // 根据JSON对象的属性的名称获取属性的值 var jsonObj = { name: "jxqlovejava" }; // JSON对象 console.log(jsonObj.name); // "jxqlovejava" var jsonStr

  • ExtJS4给Combobox设置列表中的默认值示例

    这个是model 复制代码 代码如下: Ext.regModel('commemModel', { fields : [ 'name', 'id' ] }); 定义一个store设置id为s1的容器的默认值是 第一季度 复制代码 代码如下: var gjcx1 = new Ext.data.Store({ autoLoad:true, model : commemModel, proxy : { type : 'ajax', url : '../store/cxjd.json' }, liste

  • Extjs4 Treegrid 使用心得分享(经验篇)

    最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来.像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料基本靠遍历,还是人工的. 使用treegrid,需要在调用页面的head中加载以下几个文件: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="css/ext-

  • ExtJS4中的requires使用方法示例介绍

    ExtJS4中的requires使用方法示例介绍

    ExtJS4的requires是新增的机制,主要是实现异步加载机制.这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件,提高了加载速度和用户等待时间. requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录,然后在需要用到对应js文件的时候使用Ext.require进行加载. 文件的存储结构如下所示:  ux文件夹和lesson2.htm和lesson22.js在相同的目录下,而使用到的MyWin.js存放在ux的文件夹中. 在lesso

  • Extjs4如何处理后台json数据中日期和时间

    当ASP.NET后台使用JavaScriptSerializer这个组件将对象序列化为json,或者使用ScriptMethod特性的json [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] public List<EUser> Users()//参数测试用 { List<EUser> l = new List<EUser>(); Random a

  • Extjs4 类的定义和扩展实例

    一般定义方式,注意方法和函数的添加方式不同.(添加函数只能用override方式添加不知为什么,有知道的,请搞之.) 定义一个类,并给他一个方法 复制代码 代码如下: Ext.define('Simple.Class',{ welcome:function(){ alert('Welcome to the app'); } }); 使用Ext.override方法对已有类进行重载并添加函数 复制代码 代码如下: Ext.override(Simle.Class,{ goodBye:functio

随机推荐