针对版本extjs 2 /3.x
原因:每个单元格的div都有一个属性:unselectable="on",是css问题。
网上关于grid不能复制问题都给出了相应的解决方法,我只是增加了针对chrome解决方案,具体如下
思路:
1.写一个css允许单元中的文本可以复制,同时又不会因为css重名而被覆盖。
2.重新单元格模版使用改css
step1:在相应的页面增加如下css
<style type= "text/css" >
.x-selectable, .x-selectable * {
-moz-user-select: text! important ;
-khtml-user-select: text! important ;
-webkit-user-select: text!important;
}
</style>
step2: 新建一个js脚本,在ext-all.js后面引入
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>'
);
-----------------------------------------------------------------------------
另外关于 css中 -moz-user-select 用法如下Summary
-moz-user-select is a Mozilla property extension to CSS that is used to determine whether or not an element may have its content selected.
Media: interactive
Possible uses include: prohibiting the selection of content in attempts to reduce blatant copying.
Syntax
TARGET_ELEMENT{-moz-user-select: none;}Legal Values
Value | Description |
---|---|
inherit | Inherit the value from the parent element. |
none | None of the content may be selected. |
text | Only the text within the element may be selected. |
element | A single element may be selected (from many). |
elements | Multiple elements may be selected. |
all | The contents must either be selected in entirety or none at all. |
toggle | The contents are selected "following a standard toggling content model" [1]. |
tri-state | unknown |
-moz-all | unknown |
Usage Examples
This sample code provides a simple "Hello, World!" text which prevents the user from selecting the content:
<span style="-moz-user-select: none;"> Hello, World! </span>
后面 ! important ; 网友解释如下
1、用于解决IE对某些CSS规范有偏差的情况.
比如在IE中的效果总是和其他的浏览器如firefox,opera等相差2px,导致页面布局有错位, 这是因为IE对盒之间距离的解释的bug造成的,针对这种情况我们就可以利用!important来帮助解决。
例如下面这个样式
margin-left:20px!important;
margin-left:40px;
}
如果是在firefox,opera,chrome中,这些浏览器支持!important属性,也就是说他们会默认让margin-left:20px!important; 这条语句生效,下面的不带!important声明的样式将不会覆盖它,换句话说就是他的级别最高,下面的人都不能取代我!
但是,如果换作是IE浏览器会是什么情况呢,因为IE不支持!important ,就是说IE不认识这句话是什么意思,于是傻瓜IE就把这条给略过了,下面那条他可是认识的,于是margin-left:40px;
就生效了。
说到这,需要有一点注意:
并不说IE真的不认识!important,如果你单单想用!important去区别IE和其他浏览器那你就错了,比如:
backgroud-color:black !important;
}
我们异想天开的认为,这条样式IE不认,我们可以让它在其他浏览器上定制显示。到底是不是这样呢? 真的不是! IE也认了。
说到这你是不是有点糊涂了,到底IE认不认啊???
答案很简单,只有当同时出现两个同名的样式时,才可以这样用,就像下面这样的.
.myclass{
margin-left:20px!important;
margin-left:40px;
}
2、如果有定义了一个样式A,比如font-size,你不打算让以后也叫样式A的覆盖掉这个font-size,也可以用 !important . 而如果新样式也用了!important 则还是会强制覆盖掉
font-size:12px !important;
}
.A{
font-size:14px; //不会生效
}
.A{
font-size:14px !important; //生效
}
注意,一定要是同名的样式,也就是样式名都叫A的样式才行,如果是父代与子代的情况就不管用了,比如说:
<head>
<style>
.father{
font-size:12px !important;
}
.child{
font-size:14px;
}
</style>
<body>
<div class="father">
<div class="child">I am child </div>
</div>
</body>
</html>
这种情况下,child的font-size就是14px,不受 father影响。
还有什么其他的用法,请大家补充,谢谢。