Question

我想更改复选框的字段。例如，默认情况下，它在检查时为刻度线，在未选中时为空白。但我需要在未选中的选中和错误的符号（x）上检查签名（✔）。

Answer 1

我知道这不是extJS解决方案，但它可以通过CSS和一些自定义图标（这里使用FontAwesome）来实现。
这里做的是，隐藏默认复选框和显示图标。由于FontAwesome默认情况下X的框架没有图标，我在那里创建了一个边框唯一的缺点是，您无法使用<label><input></label>

＆＃13;

@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";
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用这个小而简单的CSS来完成此操作。解决方案会根据您的主题略有不同，但例如在ExtJS 6 Triton：

.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"
}

如何在ExtJs中更改复选框的字段？

2 个答案: