PDA

View Full Version : Dynamically changing toolbar button color - need help - part 2



rrandymeyer
10 Feb 2020, 1:00 PM
Hey All,

I am back on a prior answered thread due to feedback. Here is a link (https://www.sencha.com/forum/showthread.php?472881-Dynamically-changing-toolbar-button-color-need-help)to the original thread. I have updated the fiddle (https://fiddle.sencha.com/#view/editor&fiddle/294g) to show the behavior with the Apply button. I am looking to keep the color on the mouseover and pressed events. As you can see they go grey currently.

Going off the last answer an poking around I have tried many styles with no success. Here is what I have:

.save_button_active {
background: #008000;
}

.save_button_active .x-btn-btn-focus-default-toolbar-small {
background: #008000;
}

.save_button_active .x-btn-btn-over-default-toolbar-small {
background: #008000;
}

.save_button_active .x-btn-icon-el-default-toolbar-small {
color: white;
}

.save_button_active .x-btn-inner-default-toolbar-small {
color: white;
}

I am pretty sure it has something to do with the btn-over and btn-focus but can't figure it out again..

Thanks in advance for any help.

Rudy

firefoxSafari
11 Feb 2020, 9:09 AM
The button class has configs that specify the classes that get added and removed for events like mouseover. If you're just interested in keeping the style on mouseover, the easiest way is to set the over config to nothing to bypass adding the extra style completely.

overCls: ''

If you're interested in adding slightly different styles on mouseover etc you'd have more work to do, but it's the same idea adding your own custom extra class and using this to help out with the css selection.

rrandymeyer
11 Feb 2020, 12:08 PM
Thanks again @firefoxSafar I was looking at overCls in Button.js but did not think to override it in my button. I also set focusable: false which solved my issue of hitting "Apply" and losing my color. It is interesting when I go through the different themes that the css: background-color: green; did not work when using Neptune, I had to change it to background: green;

The fiddle (https://fiddle.sencha.com/#view/editor&fiddle/294g) is up to date.