Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便。
分析: 用IE Developer Toolbar打开ExtJs输出的代码研究了一下,发现每个单元格的div都有一个属性:unselectable="on",看来是css在作怪。
版本: 2.2
解决办法: extJs官方论坛上有具体的解决办法,比较可行的如下。
step1:添加新的css样式。
CSS代码
<style type= "text/css" >
.x-selectable, .x-selectable * {
-moz-user-select: text! important ;
-khtml-user-select: text! important ;
}
</style>
step2:修改Ext.grid.GridPanel的protoType,我是自己写了一个新的js文件,记得要在ext-all.js后面引入。
JavaScript代码
if (!Ext.grid.GridView.prototype.templates) {
Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>' ,
'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>' ,
'</td>'
);
done!现在GridPanel的单元格可以选中了。
分享到:
相关推荐
解决extjs中的GridPanel的单元格在IE无法选中复制的问题
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
extjs单元格合并,gridpanel中多行合并
ExtJS的GridPanel导出excel文件,方便快捷易懂!
100行代码解决ExtJs4.1合并单元格问题
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
为web开发提供先进的技术,ExtJS 融合了Css和JavaScript的一些组建,极大地提高了web开发的速度与可行性需求
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
主要介绍了Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法,需要的朋友可以参考下
此文件用于项目首页内容,使用了ExtJs中的GridPanel
ExtJs 4.0 Grid 单元格合并控件封装
NULL 博文链接:https://stanly-xia.iteye.com/blog/1534256
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
NULL 博文链接:https://zero9842.iteye.com/blog/674722
Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
EXTJS.GRIDPANEL中日期格式 设置
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
EXTJS实现单元格变色、行变色(文字、背景)
主要介绍了Extjs4实现两个GridPanel之间数据拖拽功能具体方法,有需要的朋友可以参考一下