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

时间:2016-04-05 17:33:41

标签: javascript extjs extjs3

我有一个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 dev工具中有断点,if和else块都被命中。

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

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

任何帮助表示感谢。

由于

1 个答案:

答案 0 :(得分: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');
}