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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
浅析javascript中的DOM
Mar 01 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
浅谈Python的文件类型
2016/05/30 Python
利用python求相邻数的方法示例
2017/08/18 Python
python 日志增量抓取实现方法
2018/04/28 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
护士自我评价
2014/02/01 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
个人廉洁自律总结
2015/03/06 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL
MySQL transaction事务安全示例讲解
2022/06/21 MySQL