Question

我有一个复选框字段，框标签为绿色。当用户选中复选框时，我需要更改boxlabel的颜色（例如：黄色）。我尝试验证复选框，但它不起作用。有什么建议吗？

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

您是否尝试为整个复选框着色？如果是这样的话，那就是片段：

{
	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) {
			checkbox.setStyle('backgroundColor', '#ddd');
		} else {
			checkbox.setStyle('backgroundColor', '#BCF5A9');
		}
	}
}

Answer 2

如果您只需要更改boxLabel的颜色，请尝试这种方式。

＆＃13;

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()
});

＆＃13;

<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">

＆＃13;

选中时更改复选框字段的颜色

2 个答案: