ExtJsのチェックボックスのフィールドを変更するには？

Question

チェックボックスのフィールドを変更したいと思います。 デフォルトの例では、チェックの目印とチェックが入っていません。 しかし、チェックマークが付いていればチェックマーク（✔）が必要です。

Answer 1

これはextJSソリューションではありませんが、CSSといくつかのカスタムアイコン（ここではFontAwesome）によって実現できます。
ここで行われることは、デフォルトのチェックボックスと表示アイコンを隠すことです。 FontAwesomeはデフォルトでXの枠内にアイコンを持っていないので、そこに枠線を作成しました。
だけ欠点である、あなたはあなたがこの小型でシンプルなCSSでこれを行うことができます<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

を使用することはできません。解決方法は、テーマによって多少異なります。 ExtJSの6中トリトン：

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

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

これは、すべてのチェック欄を変更、あなたはこのようなスタイルの特定のカラムが必要な場合は、列上の特定のuserCls使用します。CSS

で

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

を

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

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