如何更改ExtJs中複選框的字段？

Question

我想改變複選框的字段。 例如，默認情況下它是勾選勾號，未勾選時爲空白。 但我需要選中檢查標誌（✔），並檢查未選中的錯誤標誌（x）。

Answer 1

我知道這不是extJS解決方案，但它可以通過CSS和一些自定義圖標（這裏是FontAwesome）來實現。
這裏所做的是，您隱藏默認複選框和顯示圖標。由於FontAwesome在默認情況下沒有X中的圖標，所以我在那裏創建了一個邊框。
唯一的缺點是，你不能使用<label><input></label>

@import url(//opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css); 
 

 
h1 { font-size: 1.5em; } 
 
label { font-size: 24px; } 
 
div { 
 
    width: 175px; 
 
    margin-left: 20px; 
 
} 
 

 
input[type=checkbox] { display:none; } 
 

 
input[type=checkbox] + label:before { 
 
    font-family: FontAwesome; 
 
    display: inline-block; 
 
    width: 18px; 
 
    height: 18px; 
 
    margin-right: 10px; 
 
    border: 2px solid #000; 
 
    border-radius: 25%; 
 
    line-height: 17px; 
 
} 
 

 
input[type=checkbox] + label:before { 
 
    content: "\f00d"; 
 
} 
 

 
input[type=checkbox]:checked + label:before { 
 
    content: "\f00c"; 
 
}

<h1>Custom Checkboxes</h1> 
 
<div> 
 
    <input id="box1" type="checkbox" /> 
 
    <label for="box1">Unchecked</label> 
 
</div> 
 
<div> 
 
    <input id="box2" type="checkbox" checked /> 
 
    <label for="box2">Checked</label> 
 
</div>

Answer 2

你可以用這個小而簡單的CSS做到這一點。解決方案根據您的主題略有不同，但例如在ExtJS的6海衛：

.x-grid-checkcolumn-checked:before { 
content:"\f05d" 
} 

.x-grid-checkcolumn:before { 
content:"\f05c" 
} 

這將改變所有支票列，如果你需要樣式這樣的某些列，使用特定的userCls在列：

xtype:'checkcolumn', 
userCls:'myCls', 

與CSS

.myCls .x-grid-checkcolumn-checked:before { 
content:"\f05d" 
} 

.myCls .x-grid-checkcolumn:before { 
content:"\f05c" 
}