ExtJs 按钮 - 在单击侦听器上更改文本和 cls

Posted

技术标签:

【中文标题】ExtJs 按钮 - 在单击侦听器上更改文本和 cls【英文标题】:ExtJs button - change text and cls on click listener 【发布时间】:2016-04-05 17:33:41 【问题描述】:

我有一个 extjs 3.4 按钮,其作用类似于切换按钮,请参见下面的代码:

    this.advanceFilterToggleBtn = 
    xtype: 'button',
    id: 'advancedSearchLink',
    text: 'More Filter Options',
    iconCls: 'button-more-filter-options',
    width: '150',
    listeners: 
        click: function(btn, el)
            // do stuff
            if(this.text === 'More Filter Options')
                // do some more stuff
                this.text = 'Less Filter Options';
                this.iconCls = 'button-less-filter-options';
            else 
                this.text = 'More Filter Options';
                this.iconCls = 'button-more-filter-options';
            
        
    

按钮上的文本和类发生了变化,我可以确认,但显示没有更新。这意味着它仍然显示相同的初始文本和下雪佛龙。我在 chrome 开发工具中有断点,if 和 else 块都被命中。

我尝试使用通过单击侦听器传递的 btn 对象的 setText 和 setIconCls,而不是使用“this”,但它不起作用。在这种情况下,else 块不会被命中。

我尝试在 if 和 else 块的开头移动 this.text 和 this.iconCls 但没有成功。

任何帮助表示赞赏。

谢谢

【问题讨论】:

使用this.setText('Less Filter Options')this.setIconClass('button-less-filter-options') @YasuyukiUno 我刚才尝试了你的建议,现在我想我应该超越这一功能,找出阻止文本和类改变的原因。 【参考方案1】:
if(btn.getText() === 'More Filter Options')
    advForm.expand(true);
    filterPanel.setHeight(220);
    srTab.doLayout();
    btn.setText('Less Filter Options');
    btn.setIconCls('button-less-filter-options');
 else 
    advForm.collapse();
    filterPanel.setHeight(130);
    srTab.doLayout();
    btn.setText('More Filter Options');
    btn.setIconCls('button-more-filter-options');

【讨论】:

"我尝试使用通过点击侦听器传递的 btn 对象的 setText 和 setIconCls,而不是使用 'this',但它不起作用。在这种情况下,else 块不会被命中。" 谢谢@Alexander,让我看看这里发生了什么。

以上是关于ExtJs 按钮 - 在单击侦听器上更改文本和 cls的主要内容,如果未能解决你的问题,请参考以下文章

extjs4 在按钮单击而不是鼠标悬停时显示工具提示

更改侦听器在 extjs 中不起作用

如何删除 addClsOnOver 监听器 ExtJS

Extjs 窗口关闭事件

Java SWT 创建侦听器以更改标签的文本并返回数据

在 xul 和 javascript 中通过按钮单击事件上的另一个工具提示文本更改工具提示文本