チェックボックスのチェックボックスの色を変更する

Question

ボックスのラベルが緑色で表示されているチェックボックスフィールドがあります。ユーザーがチェックボックスをオンにすると、ボックスラベルの色を変更する必要があります（たとえば、黄色）。私はチェックボックスを検証しようとしましたが、それは動作しません。助言がありますか？

xtype : 'checkbox', 
id: 'checkbox1', 
name : 'checkbox', 
style: 'background-color : #BCF5A9', 
boxLabel: 'Mycheckbox' 
//I tried the below handler function. but it doesnt work 
handler: function (checkbox, checked) { 
      if (checked) { 
       style : 'background-color: #ddd'; 
      } 
} 

Answer 1

、この方法を試してみてください。

Ext.create('Ext.form.Panel', { 
 
    bodyPadding: 10, 
 
    title: 'Checkbox Test', 
 
    items: [{ 
 
    xtype: 'checkboxfield', 
 
    id: 'checkbox1', 
 
    name: 'checkbox', 
 
    style: { 
 
     color: 'green' 
 
    }, 
 
    boxLabel: 'MyCheckbox', 
 
    handler: function(checkbox, checked) { 
 
     if (checked) { 
 
     checkbox.el.setStyle("color","red"); 
 
     //checkbox.setBoxLabel('<span style="color:red">MyCheckbox</span>'); 
 
     } else { 
 
     checkbox.el.setStyle("color","green"); 
 
     //checkbox.setBoxLabel('<span style="color:green">MyCheckbox</span>'); 
 
     } 
 
    } 
 
    }], 
 
    renderTo: Ext.getBody() 
 
});

<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

Answer 2

チェックボックス全体を色づけしようとしていますか？ので、ここでスニペットだ場合：あなただけboxLabelの色を変更する必要がある場合

{ 
 
\t xtype : 'checkbox', 
 
\t id: 'checkbox1', 
 
\t name : 'checkbox', 
 
\t style: 'background-color : #BCF5A9', 
 
\t boxLabel: 'Mycheckbox', 
 
\t //I tried the below handler function. but it doesnt work 
 
\t handler: function (checkbox, checked) { 
 
\t \t if (checked) { 
 
\t \t \t checkbox.setStyle('backgroundColor', '#ddd'); 
 
\t \t } else { 
 
\t \t \t checkbox.setStyle('backgroundColor', '#BCF5A9'); 
 
\t \t } 
 
\t } 
 
}