ExtJs。如何在字段面板中为复选框设置 CSS

Question

我需要更改字段面板中复选框的显示。但是我还没有找到可以为它设置css样式的地方。 我的代码是这样的

{
     xtype: 'fieldset'
     ,title:'<font size="3"><spring:message code="title"/></font>'
     ,collapsible:true
     ,checkboxToggle: true
     ,collapsed: true
     ,margin: 5
     ,border: 0
     ,items: [{..}] 
}

截图：

我需要什么：

Answer 1

这是我能想到的解决方案。将字段集与复选框组一起使用。如果您检查复选框的 dom 布局，您会看到它是按钮类型，带有重复复选框的背景图像。因此，如果您想更改复选框的样式，您还必须更改背景图片。

{                   
                xtype:'fieldset',
                columnWidth: 0.5,
                title: 'Fieldset 1',
                collapsible: true,                
                defaults: {anchor: '100%'},
                layout: 'anchor',
                items :[
                        {
                            xtype: 'checkboxgroup',                         
                            // Arrange checkboxes into one column, distributed vertically
                            cls : 'checkboxOverride',                               
                            columns: 1,
                            vertical: true,
                            items: [
                                { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                                { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true },
                                { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }                                 
                            ]
                        }
                    ]

        }

在 CSS 中添加，

.checkboxOverride{
    border-color: blue; 
}

.checkboxOverride .x-form-checkbox{
    border-color: blue; 
    background-repeat: no-repeat;
    background-image: url("checkbox_unchecked.png");    
    width: 50px;
    height: 50px;
    margin: 20px;
    padding: 20px;
    vertical-align: middle;
}
.checkboxOverride .x-form-field{
    color: blue;

}
.checkboxOverride .x-form-cb-checked .x-form-checkbox {
    background-image: url("checkbox_checked.png");
    background-position: 0 0px;
}

结果会是这样的

感谢this stackoverflow post