4

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

   {
    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，这是应用代码后得到的屏幕截图。 白色背景

4

1 回答 1

3

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 上测试

于 2013-07-04T20:47:53.787 回答