ExtJS的。如何在fieldpanel中为复选框设置CSS

Question

我需要更改fieldpanel中复选框的视线。但我还没有找到可以为它设置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

这是我能提出的解决方案。将fieldset与checkboxgroup一起使用。如果你看到复选框的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 add中，

.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