Toggle button: change button icon when pressed?

[dbadke]

I have a toolbar button with toggling enabled:

tb.addButton({
    text: '',
    tooltip: 'Enable filter',
    cls: 'x-btn-icon filter-btn',
    enableToggle: true,
    toggleHandler: this.toggleFilter,
    scope: this}));

This works OK, but I want to have a different icon when the button is in the pressed state. I tried to do the CSS the same way as for disabled buttons:

.filter-btn .x-btn-text {
   background-image: url('../images/filter.gif');
}

.x-item-disabled .filter-btn .x-btn-text {
   background-image: url('../images/filter-cold.gif');
}

.x-btn-pressed .filter-btn .x-btn-text {
   background-image: url('../images/filter-on.gif');
}

This does not work; the icon doesn't change.

I watched the button in Firebug as the button was toggled, and saw that .x-btn-pressed was added to the button table element when in pressed state, where .x-item-disabled is added to the td element that is the parent of the table element. I tried a variety of CSS chains for the pressed state, without success.

So, is there any way to have a "pressed" icon in a way similar to how we can have a "disabled" icon?

[JeffHowden]

Try:

.x-btn-pressed.filter-btn .x-btn-text {
  background-image: url('../images/filter-on.gif'); 
}

The difference is there's no space between the .x-btn-pressed and .filter-btn classes. The reason for that is that these are classes applied to the same element so they must be chained together like this. Essentially it means, apply these style definitions to all elements with a class of .x-btn-text that are descendants of all elements that have both the .x-btn-pressed class and the .filter-btn class applied.

[dbadke]

Thanks. That works!