ExtJs에서 확인란의 필드를 변경하는 방법은 무엇입니까?

Question

확인란을 변경하고 싶습니다. 예를 들어, 기본값은 확인 표시 (tick sign on check)이며 공백 (blank)은 선택하지 않습니다. 하지만 체크 표시가 잘못되었습니다 (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를 사용, 모든 수표 열을 변경합니다 : CSS를 함께

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

을

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

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