如何在 Ext js 中更改按钮文本

Question

我是这个 Ext js 的新手。我只是在研究按钮。我创建了一个像 on/off 这样的开关按钮。在我的例子中它是隐藏的，show.I 只是在下面分享了我的代码，你可以 refer.In 我刚刚创建的代码并隐藏一个圆圈元素initially.I 有一个名为 Make Circle.When 的按钮，我单击它显示隐藏的圆圈元素的按钮，它还必须将其文本从 Make circle 更改为 Hide circle 这使得一些 sense.So 我可以单击相同的按钮以隐藏圆形元素。这里的功能完美运行，但按钮上的文本没有 change.Please 让我知道为什么以及如何解决它。

var makeCircleBtn = Ext.create({
    xtype : 'button',
    text : 'Make circle',
    renderTo : Ext.getBody(),

    var circle = Ext.create({**strong text**
                        xtype : 'draw',
                        id : 'circleId',
                        hidden:true,
                        sprites : [ {
                            type : 'circle',
                            fillStyle : 'red',
                            r : 50,
                            cx : 100,
                            cy : 100
                        } ],
                        height : 200,
                        width : 200,
                        renderTo : Ext.getBody(),

                    })// circle Ends Here

makeCircleBtn.on('click',function(){
    if (makeCircleBtn.text == 'Make circle') {
        makeCircleBtn.text = 'Hide Circle';
        Ext.getCmp('circleId').show();

    }else{
        makeCircleBtn.text = 'Make circle';
        Ext.getCmp('circleId').hide();
    }

})

谢谢弗兰克

Answer 1

首先我使用 ExtJs Classic 工具包版本 6.0.1 来测试这个！

您只需更改：

    makeCircleBtn.text = 'Hide Circle';

为此：

    makeCircleBtn.setText('Hide Circle');

这解决了我的问题。

不过我还有一些建议。

不要使用配置 id。有一种更好的方法可以给你的组件一个唯一的 id > itemId。 id 是全局的，如果您有多个具有相同 id 的组件，将会导致错误。使用 itemId 你不会运行陷入这个问题。

而不是：

if (makeCircleBtn.text == 'Make circle') {
   Ext.getCmp('circleId').show();

} else{
   Ext.getCmp('circleId').hide();
}

你可以这样做：

yourCircleComponent.setVisible(yourCircleComponent.hidden);

这是 show/hide 圆形组件的一种更优雅的方式。

我还制作了一个煎茶fiddle供您测试。我还包含了我建议的更改。

示例如下： https://fiddle.sencha.com/#view/editor&fiddle/31mn

希望对您有所帮助！

如何在 Ext js 中更改按钮文本

How to change button text in Ext js

extjs6