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单页面手势滑屏切换原理详解
Mar 21 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
React Router基础使用
Jan 17 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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 多关键字 高亮显示实现代码
2012/04/23 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
js form action动态修改方法
2008/11/04 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python itertools模块详解
2015/05/09 Python
谈谈python中GUI的选择
2018/03/01 Python
tensorflow获取变量维度信息
2018/03/10 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
《与朱元思书》的教学反思
2014/04/17 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
毕业论文致谢词
2015/05/14 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技