extjs grid 复制问题还有一种解决方式.

之前的项目中尽管也常常使用到extjs,但也许是没有注意到,也也许是根本就没有须要用到这个功能.

前几天在和客户讨论需求时,客户说想要可以将gird表中的数据复制出来,当时没多想,感觉这功能extjs应该是支持的,应该配置一个后几个參数就能搞定的吧.但是回来后查extjs的api才发现好像根本就没有这个设置的.再回忆之前的项目中,好像确实没有做过这个功能.所以赶紧就到网上找了,也找个来一些解决方式,但感觉实现起来比較麻烦,也没去试.

今天再想到这个问题时,突然一个想法在脑海中闪现,应该可以借用gird的单元格编辑功能来实现复制的效果吧.于是赶紧去測试下,结果还真可以,代码例如以下:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    <span style="color:#ff6666;">plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            pluginId:'rowEditing',
            clicksToEdit: 1
        })
    ],</span>
    columns: [
        { text: 'Name',  dataIndex: 'name' ,
         <span style="color:#ff6666;">editor:{
             xtype: 'displayfield'
         }</span>
        },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc25haWxfc3Bvb3I=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="grid复制效果图">

感觉效果还不错吧,

总结起来,长处非常明显就是实现简单方便,支持各种版本号的extjs.而确定就是不支持行复制,并且须要为每一个column中都写一个editor.

今天才发现,原来Extjs 本来就支持grid复制(添加viewConfig:{enableTextSelection:true}就可以),哎...
代码例如以下:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    viewConfig:{enableTextSelection:true},
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
时间: 2024-11-05 11:36:51

extjs grid 复制问题还有一种解决方式.的相关文章

extjs grid 复制问题另一种解决方案.

之前的项目中虽然也经常使用到extjs,但或许是没有注意到,也或许是根本就没有需要用到这个功能. 前几天在和客户讨论需求时,客户说想要能够将gird表中的数据复制出来,当时没多想,感觉这功能extjs应该是支持的,应该配置一个后几个参数就能搞定的吧.可是回来后查extjs的api才发现好像根本就没有这个设置的.再回想之前的项目中,好像确实没有做过这个功能.所以赶紧就到网上找了,也找个来一些解决方案,但感觉实现起来比较麻烦,也没去试. 今天再想到这个问题时,突然一个想法在脑海中闪现,应该能够借用g

ListView+CheckBox两种解决方式及原因分析

近期在用ListView+CheckBox搞一个item选中的项目,我将CheckBox的focus设置为false,另我大喜的是,CheckBox居然能够选中(窃喜中),这么简单就搞定了,由于数据量较小,也没有发现什么问题. 后来数据多了. 页面须要滑动了, 发现了一个奇怪的问题,前面明明选中了,而再次滑动回去的时候居然变成未选中状态! 这是我刚開始写的那段错误的代码: @Override public View getView(int position, View convertView,

WEB安全实战(五)XSS 攻击的第二种解决方式(推荐)

序 说到 XSS 攻击,前边已经有两篇文章在讲这个事了,这次又拿出来说,主要是针对近期工作中的一些新的问题.那么之前是怎么解决问题的呢?为什么又要换解决方式?以下就具体的跟大家分享一下. 旧方案 公司的測试团队发现这个问题之后,就要求尽快的解决,在网上查了非常多相关的资料,也翻阅了基本安全方面的书,基于 XSS 的攻击原理,自己写了一个 Filter,并在该 Filter 中增加了对各种请求的处理代码.首先是拦截浏览器发出的请求,然后对拦截到的请求进行过滤,获取參数列表,參数值列表(包含表单提交

Eclipse SVN 冲突的 介绍 及 四种解决方式

转自https://blog.csdn.net/diyu122222/article/details/79879376 1.为什么会出现冲突<1>两个开发人员,Harry和Sally,分别从服务器端下载了文件A. <2>Harry修改之后,A变成了A',Sally修改之后,A变成了A". <3>Harry先一步提交,使服务器端文件的版本也变成了A' <4>Sally本地的文件A"已经过时了,此时她已无法提交文件,服务器会要求她先进行一次更

域名从www跳转到非www,Apache和Nginx2种解决方式

背景:www跳转到非www. http://www.jiutianniao.com和http://jiutianniao.com 都可以访问. 但是,想把www这个重定向到非www,输入更简单,让搜索引擎也把他们当作同1个网站. 2种解决办法: 1.Apache: 在项目jiutianniao下,新建".htaccess"文件. RewriteEngine On RewriteCond %{HTTP_HOST} ^www.jiutianniao.com RewriteRule (.*)

跨域的三种解决方式

跨域问题 跨域问题对于WEB前端工程师来说是比较重要的一个问题,因为我们时常需要去解决这样的问题,在其他类型的前端开发来说,他们并没有跨域问题 跨域问题的产生 因为浏览器有同源策略:只有在同域名,同端口,同协议的情况下才可以进行数据交互: 有的时候,例如,在公司开发项目的时候,前端开发的服务器可能和后端服务器不是同一个,因为可能是通过gulp.webpack搭建的开发服务器,就需要解决跨域问题,再例如,在大公司有,数据服务器不只有一个,所以跨域问题也必然存在 解决方法 jsonp 是一种前后端结

js 跨域问题常见的五种解决方式

一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件

GET方式提交中文编码问题以及三种解决方式

GET方式提交在WEB中是非常常用的方式,有时候我们在使用GET方式提交请求不得不提交中文,但是TOMCAT等容器对于GET方式的编码问题总是让人折腾. 先说说流程吧: 我们的内容使用GET方式发送,就会在URL后面带上内容,在游览器发来的请求经过了游览器的URI编码,发送到服务器这边,如果是struts2会经过拦截器进行URI解码,并且使用"iso8859-1"进行编码,因为传输过程是二进制的. 这时候想解决中文编码问题有三种方式 假设: url:http://localhost:8

jsp中Get方式请求参数乱码的两种解决方式

第一种方式: <% //获取请求包含的下旬字符串 String rawQueryStr=request.getQueryString(); //使用URLDecoder解码祖父穿 String queryStr=URLDecoder.decode(rawQueryStr, "UTF-8"); //以&符号分解查询字符串 String paramPairs[]=queryStr.split("&"); for(String paramPair:p