Extjs grid 不能复制问题解决

针对版本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来帮助解决。

 例如下面这个样式

.myclass{
 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和其他浏览器那你就错了,比如:

 

.myclass{
backgroud-color
:black !important;
}

我们异想天开的认为,这条样式IE不认,我们可以让它在其他浏览器上定制显示。到底是不是这样呢? 真的不是! IE也认了。

 

说到这你是不是有点糊涂了,到底IE认不认啊???

答案很简单,只有当同时出现两个同名的样式时,才可以这样用,就像下面这样的.

.myclass{
 margin-left
:20px!important;
 margin-left
:40px;

}

 

 

2、如果有定义了一个样式A,比如font-size,你不打算让以后也叫样式A的覆盖掉这个font-size,也可以用 !important . 而如果新样式也用了!important 则还是会强制覆盖掉

 

复制代码
.A{
 font-size
:12px !important;
}
.A
{
 font-size
:14px;   //不会生效
}

.A
{
 font-size
:14px !important; //生效
}
复制代码

 注意,一定要是同名的样式,也就是样式名都叫A的样式才行,如果是父代与子代的情况就不管用了,比如说:

 

复制代码
<html>
<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影响。

 

还有什么其他的用法,请大家补充,谢谢。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章