Results 1 to 3 of 3

Thread: Dynamically changing toolbar button color - need help

  1. #1
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    126

    Default Dynamically changing toolbar button color - need help

    Using ExtJS 7.0.0.156

    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 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
    Rudy

  2. #2
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    459

    Default

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

  3. #3
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    126

    Default

    @firefoxSafari - Thank you! Please check the updated fiddle.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •