Sencha touch 2：如何更改默认复选框选中和取消选中图像

Question

在更改默认复选框图像时遇到问题。 我添加了两个图像checked.png和unchecked.png。并为已检查和未选中添加了两个css类。仅显示未经检查的图像，但是当我检查它时，不显示图像。 我通过执行下面相同的操作修改了默认按钮，它适用于按钮。但是对于复选框，这不起作用。（得克莱斯不存在于checkboxfield中）。以下是供您参考的小片段。

   {
    xtype: 'checkboxfield',
    ui:'plain',
    checked: 'true',
    action: 'didnotassisted_Action',
    id: 'id_assignment_didNotAssisted',
    cls: 'closeout-checkbox-unchecked',
    // pressedCls: 'closeout-checkbox-checked'
    },

的CSS：

.closeout-checkbox-unchecked{
    background-color:transparent;
    background-image:url('../images/unchecked.png');
    height: 44px;
    width: 44px;
}

.closeout-checkbox-checked{
    background-color:transparent;
    background-image:url('../images/checked.png');
    height: 44px;
    width: 44px;
}

如果有任何不同的方法来完成，请帮助我。谢谢。

@Andrea，以下是应用代码后所获得内容的屏幕截图。

Answer 1

Sencha没有使用类来区分复选框状态，而是利用复选框的:checked伪类选择器。

您可以更改复选框图标，将伪元素:after添加到其.x-field-mask兄弟。

将ui: 'custom'提供给checkboxfield并添加这些CSS：

.x-field-custom .x-input-checkbox:checked  + .x-field-mask:after  {
    content: "";
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    right: 1em;
    background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
    background-size: contain;
    display: block;
}

.x-field-custom .x-input-checkbox  + .x-field-mask:after {
    content: "";
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    right: 1em;
    background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
    background-size: contain;
    display: block;
}

在Sencha 2.2.1上测试