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

2024-12-15 15:15:33

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

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

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

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

代码如下:

复写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
}

js 复制功能支持 for IE/FireFox/mozilla/ns

FF,不支持复制功能,要支持的话,很难的 js 复制功能支持 for IE/FireFox/mozilla/ns 代码如下: 这里有两各上方式 : // js 复制功能支持 for IE/FireFox/mozilla/ns function copy_clip(meintext) { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netsc
js禁止页面复制功能禁用页面右键菜单示例代码

<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在
JavaScript 实现完美兼容多浏览器的复制功能代码

分享一段利用 JavaScript 实现复制功能的代码,兼容多浏览器,兼容IE和火狐浏览器. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 复制功能代码,兼容多浏览器&l
JavaScript实现复制功能各浏览器支持情况实测

这两天在做Web前端时,遇到需求通过js实现文本复制的功能. 先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况: 1.IE浏览器,解决方法有三种,代码如下: 复制代码代码如下: function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象,firefox.chrome不支持 //1.通过clipboardData对象实现复制 //windo
Zero Clipboard js+swf实现的复制功能使用方法

开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.
JavaScript 复制功能代码兼容多浏览器

因此兼容性没得说了,现在用不上的话,先收藏一下吧. JavaScript 复制功能代码,兼容多浏览器 //ie copyValue=function(strValue) { if(isIE()) { clipboardData.setData("Text",strValue); alert("您已成功复制了此地址"); } else { copy(strValue); alert("内容已被复制!"); } } function isIE(num
JS实现复制功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS复制功能</title> <link href="" rel=" rel="external nofollow" stylesheet"> <style> *{ margin:0; pad
javaScript复制功能调用实现方案

复制代码代码如下: 验证码:<input type="text" id="code"/> <input type="button" value="复制" onclick="fuzhi()"> <script type="text/javascript"> function fuzhi(){ var codeVal=jQuery("#code
extjs表格文本启用选择复制功能具体实现

extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的. 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能. 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌. 首先自定义一下样式,来覆盖默认的css样式: 复制代码代码如下: <style type="text/css"> .x-selectable, .x
使用FlexiGrid实现Extjs表格效果方法分享

近一段时间Extjs真的是风光无限好,只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它,不过兄弟我可是不敢,原因很简单:太大/太笨/源码不好调试.但是对于Extjs漂亮的表格与功能的强大,实在是让我垂涎三尺,记得以前有个老外同志写过一个类似的Extjs的Jquery插件,所以就在Jquery的插件海洋中一顿海找,呵呵,还真让我找到了.看来还是我的Jquery好,小巧简单好像一部好的汽车引擎,我想要什么就可以自已DIY,真是方便.总体方案在网络传输上不超过80KB,速度比500KB大
JQuery 表格操作(交替显示、拖动表格行、选择行等)

JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码代码如下: <script type='text/javascript'><!-- $(function(){ //交替显示行 $('#alternation').click(function(){ $('tbody > tr:odd', $('#example')).toggleClass('alternatio
JS获取及设置TextArea或input文本框选择文本位置的方法

本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR
jQuery实现表格文本框淡入更改值后淡出效果

本文分为html代码和jquery两段代码,代码很简单,大家可以参考下! html代码 <table style="border:1px solid blue"> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th>操作</th> </tr> <tr>
Android textview 实现长按自由选择复制功能的方法

这里有一个大坑,我的viewGroup中有一个这个属性android:descendantFocusability="blocksDescendants" 开始没有注意到,试了好多方法都不行,后来才看到这个属性,顺便科普一下,这个属性有三个值~ beforeDescendants:viewgroup会优先其子类控件而获取到焦点 afterDescendants:viewgroup只有当其子类控件不需要获取焦点时才获取焦点 blocksDescendants:viewgroup会覆盖子类
ExtJs设置GridPanel表格文本垂直居中示例

业务场景,需要实现最终效果图如下: GridPanel代码如下配置: 复制代码代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho
Element实现表格分页数据选择+全选所有完善批量操作

后台管理系统中的列表页面,一般都会有对列表数据进行批量操作的功能,例如:批量删除.批量删除等. 之前项目中只是简单的用到Element框架中常规的属性.事件.在一次机缘巧合下,了解到一个公司内部的框架是基于Element框架内部实现了一些插件功能,对于表格这一块完善了很多功能,当时没有把握住机会去看源码是怎么实现的,现在有点小后悔呢,嘤嘤嘤~~~~没关系,自己慢慢一点一点实现. 实现的功能有: 分页数据选择全选所有数据(不是element框架自带的全选本页哦!) 1.分页数据选择一开始以为不
易语言高级表格选择任意行列获取内容的代码示例

高级表格取选择任意行列的内容 .版本 2 .支持库 eGrid .程序集窗口程序集1 .子程序 __启动窗口_创建完毕高级表格1.置数据 (1, 1, #表格常量.文本型, "我") 高级表格1.置数据 (1, 2, #表格常量.文本型, "爱") 高级表格1.置数据 (1, 3, #表格常量.文本型, "你") 高级表格1.置数据 (1, 4, #表格常量.文本型, "你") 高级表格1.置数据 (1, 5, #表格常量
extjs 时间范围选择自动判断的实现代码

extjs中有时需要选择一个日期范围,需要自动判断,选择的开始日期不能大于结束日期,或结束日期不能小于开始日期,实现的代码如下效果图: 从上图可以看到,当选择了一个开始时间后,会自动限制结束时间的选择范围,实现两个日期选择器的联动. 代码如下: 首先定义联动处理函数: Ext.apply(Ext.form.field.VTypes, { daterange: function (val, field) { var date = field.parseDate(val); if (!date)

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

相关推荐

随机推荐