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影響。

 

還有什麼其他的用法,請大家補充,謝謝。




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