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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
Vue实现双向数据绑定
May 03 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
js闭包学习心得总结
Apr 17 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
js实现3D旋转效果
Aug 18 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
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js数组操作学习总结
2013/11/04 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
深入探讨前端框架react
2015/12/09 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
python高级特性简介
2020/08/13 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
高校自主招生自荐信
2013/12/09 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript