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

回答

相关问题