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

21 Jan 2020, 11:11 AM
Using ExtJS

On our forms they first appear in "read-only" mode so the user needs to click "Edit" in order to modify things. When this happens I would like to make the Save and Cancel buttons change color to better show that edit mode is on. I have updated a fiddle (https://fiddle.sencha.com/#view/editor&fiddle/294g)to show the behavior. I cannot figure out to get the whole button to change color including the image. I have tried many combinations of styles related to the button but have not figured it out. The code to change the color is in the MainController.js - updateButtons method and the style is in sass\src\view\MainPanel.scss

I would really appreciate any help, feel free to modify/copy the fiddle sample. I did not think is would be this difficult.

Thank you

23 Jan 2020, 2:03 PM
I think you just need to be more specific on the css selectors and set the button text and image separately. Something like

.save_button_active {
background-color: green;

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

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

23 Jan 2020, 2:09 PM
@firefoxSafari - Thank you! Please check the updated fiddle (https://fiddle.sencha.com/#view/editor&fiddle/294g).