extjs表格文本启用选择复制功能具体实现


Posted in Javascript onOctober 11, 2013

extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的。

而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能。

说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌。

首先自定义一下样式,来覆盖默认的css样式:

<style type="text/css"> 
.x-selectable, .x-selectable * { 
-moz-user-select: text!important; 
-khtml-user-select: text!important; 
} 
</style>

复写extjs的table类,阻止鼠标选择文本的就是这个unselectable
/** 
* override the table class 
*/ 
Ext.override(Ext.view.Table, { 
afterRender : function() { 
var me = this; 
me.callParent(); 
me.mon(me.el, { 
scroll : me.fireBodyScroll, 
scope : me 
}); 
if (!me.featuresMC && (me.featuresMC.findIndex('ftype', 'unselectable') >= 0)) { 
me.el.unselectable(); 
} 
me.attachEventsForFeatures(); 
} 
});

然后再自定义一个feature,启用文本选择功能,通过替换取消unselectable样式,同时增加x-selectable样式
/** 
* define the select feature 
*/ 
Ext.define('Myext.grid.SelectFeature', { 
extend : 'Ext.grid.feature.Feature', 
alias : 'feature.selectable', 
mutateMetaRowTpl : function(metaRowTpl) { 
var i, ln = metaRowTpl.length; 
for (i = 0; i < ln; i++) { 
tpl = metaRowTpl[i]; 
tpl = tpl.replace(/x-grid-row/, 'x-grid-row x-selectable'); 
tpl = tpl.replace(/x-grid-cell-inner x-unselectable/g, 'x-grid-cell-inner'); 
tpl = tpl.replace(/unselectable="on"/g, ''); 
metaRowTpl[i] = tpl; 
}; 
} 
});

现在可以声明一个selectFeature了

var selectFeature = Ext.create('Myext.grid.SelectFeature');

需要启用文本选择的表格,在创建时添加这个feature就可以了

Ext.create('Ext.grid.Panel', { 
title : 'grid example', 
store : gridStore, // define before 
width : 600, 
height : 300, 
features : [selectFeature], 
columns : [{ 
text:'name', 
dataIndex:'name' 
}] 
// other code 
}
Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
Javascript创建类和对象详解
May 31 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
JS验证身份证有效性示例
Oct 11 #Javascript
JS分页效果示例
Oct 11 #Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 #Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 #Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 #Javascript
javascript自然分类法算法实现代码
Oct 11 #Javascript
jQuery阻止事件冒泡具体实现
Oct 11 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php笔记之:AOP的应用
2013/04/24 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
javascript date格式化示例
2013/09/25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
小程序实现搜索框
2020/06/19 Javascript
python异步任务队列示例
2014/04/01 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python中如何写类
2020/06/29 Python
Python 没有main函数的原因
2020/07/10 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
Python中常用的os操作汇总
2020/11/05 Python
python自动化办公操作PPT的实现
2021/02/05 Python
北京银河万佳Java面试题
2012/03/21 面试题
某公司Java工程师面试题笔试题
2016/03/27 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
小学母亲节活动方案
2014/03/14 职场文书
团代会主持词
2014/04/02 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript