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: [{..}] 
} 

screenshot

what I need

Answer 1

これは、私が思い付くできるソリューションであるように見えます。チェックボックスグループでfieldsetを使用します。チェックボックスのDOMレイアウトを調べると、チェックボックスが繰り返し表示される背景のあるタイプボタンであることがわかります。したがって、チェックボックスのスタイルを変更したい場合は、背景イメージも変更する必要があります。 CSSで

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

     } 

追加、

.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