ExtJs button - change text and cls on click listener

Question

I have an extjs 3.4 button which is acting like a toggle button, see the code below:

    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';
            }
        }
    }

the text and the class on the button changes i can confirm that but the display isn't updated. meaning it still shows the the same initial text and down chevron. i have breakpoints in chrome dev tools and both the if and else blocks get hit.

i tried using the setText and setIconCls of the btn object being passed through the click listener rather than using 'this' but it does not work. the else block does not get hit in this case.

I tried moving the this.text and this.iconCls at the start of the if and else blocks but no luck.

any help appreciated.

Thanks

Answer 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');
}