ExtJs. Wie man CSS für Checkbox in fieldpanel setzt

Question

Ich muss das Sichtfeld der Checkbox in einem Feldpanel ändern. Aber ich habe nicht gefunden, wo ich css Stil dafür einstellen kann. Mein Code sieht wie folgt aus

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

screenshot

what I need

Answer 1

Dies ist die Lösung, die ich tun konnte. Verwenden Sie fieldset mit checkboxgroup. Wenn Sie das dom-Layout des Kontrollkästchens überprüfen, werden Sie sehen, dass es sich um eine Schaltfläche mit Hintergrundbild von wiederholten Kontrollkästchen handelt. Wenn Sie also den Stil des Kontrollkästchens ändern möchten, müssen Sie auch das Hintergrundbild ändern.

{     
       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' }         
          ] 
         } 
        ] 

     } 

In 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; 
} 

Ergebnis aussehen wird

Dank this stackoverflow post