How to dynamically change the background-color of an icon button?

**mike lebowski** · 20 Feb 2012 7:03 PM

I wish to have an icon button that has state (selected vs non selected, e.g. favorite "star" button).

I know that i can affect the .x-toolbar-dark .x-button .x-button-icon.x-icon-mask background-color property in my application.scsss file, and generate a new application.css. However, that just makes all the icons have the new background color.

I want to toggle it dynamically, from within the action handler of the button. If I use "setIconCls" I can use that to change to a different icon. But i don't want to change to a different icon, i only want to change the bg color of the current icon.

Is it possible to do what I want to do via the api?

Or should I be setting up an alternative button with a different class and then hiding one button and showing the other?
thanks in advance

mike lebowski

fwiw this is what i solved to:

I declared a css class with a selector for the button's icon child element. It happens to be the 2nd span child. Both of these selectors would work, maybe there are other selectors that are more robust, both of these are positionally sensitive, but they do the trick.

Code:

/* This works too 
.active-icon span:nth-child(2) {    background-color: yellow !important;
}
*/

// This also works
.active-icon .x-button-icon:nth-of-type(2) {    background-color: yellow !important;
}

Then in the button tap handler i do:
obj.addCls('active-icon');
or
obj.removeCls('active-icon');

thanks for the suggestion.

**mitchellsimoens** · 21 Feb 2012 8:31 AM

Depends. You can switch UIs, add/remove a CSS class...

**mike lebowski** · 21 Feb 2012 9:27 AM

Can you be more specific about the add / remove css class option as that is what I would do if this were a regular web app.

The awkwardness for me is how to go about this given that the icon is itself encapsulated in the button object. That is why i asked if this is possible with the button api itself or whether I have to effectively dig deeper into the object containment hierarchy to get at the icon cls.

For example. The default css that is affecting the color of the icon is here:

Code:

.x-toolbar-dark .x-button .x-button-icon.x-icon-mask, .x-toolbar .x-toolbar-dark .x-button .x-button-icon.x-icon-mask,
.x-toolbar-dark .x-field-select .x-component-outer .x-button-icon.x-icon-mask, .x-toolbar
.x-toolbar-dark .x-field-select .x-component-outer .x-button-icon.x-icon-mask,
.x-toolbar-dark .x-field-select .x-component-outer:before .x-button-icon.x-icon-mask, .x-toolbar
.x-toolbar-dark .x-field-select .x-component-outer:before .x-button-icon.x-icon-mask {
  background-color: white;
  background-image: none;
}

I can easily define a class that has "background-color: yellow;". For example, lets call this class "active-button-icon".

Code:

.active-button-icon {
  background-color: yellow;
  background-image: none;
}

My confusion is how to most effectively go about removing the necessary class and adding the new class. The Ext.Button api has
addCls
getCls
getBaseCls
removeCls
replaceCls
setCls
setBaseCls

getIconCls
getIconMaskCls
setIconCls
setIconMaskCls

Can you advise if any of those can be used to peform the substitution I have described above. I have experimented unsucessfully with several.

**mitchellsimoens** · 21 Feb 2012 9:32 AM

removeCls will remove any number of classes. If a class specified does not exist then it won't be removed and won't error out. You can then use addCls to add the class you want on that button.

So say you have 5 different CSS classes named button-1, button-2, button-3, button-4, button-5. You have a button and only want button-3 CSS class on your button you can do this:

Code:

button.removeCls([
    'button-1',
    'button-2',
    'button-4',
    'button-5'
]).addCls('button-3');

**mike lebowski** · 21 Feb 2012 12:26 PM

I did experminent with removeCls and addCls , but my experiment was unsuccessful. I did that before even posting this thread as I usually try before posting a question.

It is my understanding that the remove and add were failing to achieve my objective b/c it seems to me that the remove and add operate on the button object not on its contained icon. Hence my original question.

I will experiment more, maybe it is pilot error on my part.

**mitchellsimoens** · 21 Feb 2012 12:28 PM

Yes, the CSS will go on the button's outer most <div> but with CSS you can use a simple selector to have your style be applied to any child element.

**mike lebowski** · 21 Feb 2012 12:35 PM

ah good point. I will try that. Thanks for the idea.

**mike lebowski** · 22 Feb 2012 4:25 PM

fwiw this is what i solved to:

I declared a css class with a selector for the button's icon child element. It happens to be the 2nd span child. Both of these selectors would work, maybe there are other selectors that are more robust, both of these are positionally sensitive, but they do the trick.

Code:

/* This works too 
.active-icon span:nth-child(2) {    background-color: yellow !important;
}
*/

// This also works
.active-icon .x-button-icon:nth-of-type(2) {    background-color: yellow !important;
}

Then in the button tap handler i do:
obj.addCls('active-icon');
or
obj.removeCls('active-icon');

thanks for the suggestion.

How to dynamically change the background-color of an icon button?

Thread Tools

Search Thread

Display

Answered: How to dynamically change the background-color of an icon button?

Answered: How to dynamically change the background-color of an icon button?