extjs表格(Ext4 Grid)文本启用选择复制功能
来源:互联网 发布:大数据人才需求分析 编辑:程序博客网 时间:2024/06/07 13:06
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(); }});
/** * 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}
原文来自:http://flyash.itcao.com/post_1084.html
- extjs表格(Ext4 Grid)文本启用选择复制功能
- extjs表格文本启用选择复制功能
- extjs 表格 启用 文本选择复制功能
- extjs表格grid功能详解
- Extjs的grid表格的复制、粘贴
- Extjs的grid表格的复制、粘贴
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- 实现Extjs的grid表格的复制、粘贴
- ExtJS中的Grid表格实现删除行功能部分代码
- extjs4 grid 实现可以选择文本内容进行复制
- 禁用右键、文本选择功能、复制按键
- 禁用右键、文本选择功能、复制按键
- 禁用右键、文本选择功能、复制按键
- Ext4 实现grid 表格文字居中
- extjs grid表格的样式
- Extjs-表格 Ext.grid.GridPanel
- Extjs 表格分组 grid grouping
- Code Manage
- 插件79:搜索Google图书
- 网络分析与网络数据集—创建网络数据集(一)
- SQ01 快速创建SAP查询报表
- 插件80:汇率换算
- extjs表格(Ext4 Grid)文本启用选择复制功能
- android Activity 和 HTML 数据通信
- Servlet处理Json请求数据包
- W3C标准简介
- 插件75:读取Yahoo! Answers
- hadoop集群搭建(ip设置和jdk安装)
- WSAEventSelect模型编程 详解
- C++ 虚函数表解析
- 网络分析与网络数据集—创建网络数据集(二)