Question

我有两个按钮，其想法是单击一个按钮并使另一个按钮的文本更改颜色，即，如果单击了一个按钮，则按钮2的文本将从其当前颜色更改为蓝色，反之亦然。我正在获取对按钮的引用，并在该引用上调用setStyle，但似乎无法正常工作。欢迎有任何见识。可以在下面找到代码片段：-

{
    xtype: 'button',
    text: 'Foo',
    id: 'foo',
    ui: 'plain',
    toggleGroup: "buttonToggle",
    listeners: {
        click: "onFooButtonClick",
        afterrender: 'onButtonsRendered'
    },
    toggleHandler: "onButtonToggled"
},
{
    xtype: 'tbseparator'
},
{
    xtype: 'button',
    text: 'Bar',
    id: 'bar',
    ui: 'plain',
    toggleGroup: "buttonToggle",
    listeners: {
        click: "onBarButtonClick",
        afterrender: 'onButtonsRendered'
    },
    toggleHandler: "onButtonToggled"
}

// Controller.js

onButtonToggled: function(button, state) {
    var clickedButton = button.id;
    button.btnInnerEl.setStyle('color', 'black');     
    if (clickedButton === "foo") {
        var btnBar = Ext.getCmp('bar');
        btnBar.setStyle('color', 'blue');
    } else if (clickedButton === "bar") {
        var btnFoo = Ext.getCmp('foo');
        btnFoo.setStyle('color', 'blue');
    }
}

Answer 1

您的'setStyle'方法错误。您必须使用花括号，并需要将颜色作为键值方式添加，如下所示：

因此您需要替换以下代码：

btnBar.setStyle('color', 'blue');
btnFoo.setStyle('color', 'blue');
button.btnInnerEl.setStyle('color', 'black');

与此：

btnBar.setStyle({'color': 'blue'});
btnFoo.setStyle({'color': 'blue'});
button.btnInnerEl.setStyle({'color': 'black'});

希望有帮助。

Ext.Component.setStyle（'color'，'value'）似乎不起作用

1 个答案: