ExtJs。如何在fieldpanel中爲複選框設置CSS

我需要更改fieldpanel中的複選框。但我還沒有找到我可以爲其設置CSS風格的地方。我的代碼看起來像這樣ExtJs。如何在fieldpanel中爲複選框設置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

來源

2017-09-21 Evgenia

你的問題是模糊的。你能給出一個你想要複選框的截圖嗎？字段集和複選框都有cls作爲屬性，您可以指定styleclass。 – AswathyPrasad

我附上了它現在的樣子。字段集中的第一個和第三個複選框。我需要把它們作爲我的第二個複選框。我想只有這樣做 - 不使用fieldset，因爲當我試圖將css屬性添加到fieldset時，它改變了框架的嘆息。 – Evgenia

這是解決方案，我可以拿出。使用帶複選框組的字段集。如果您看到複選框的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

來源

2017-09-22 08:19:22 AswathyPrasad

謝謝。我明白你的意思，但在這種情況下，這將是3個複選框，但我需要製作文件集，而不是第一個和第三個複選框（當我點擊它們時應打開一個面板）。我添加了我需要的圖片。 – Evgenia

ExtJs。如何在fieldpanel中爲複選框設置CSS

回答

相關問題