Results 1 to 3 of 3

Thread: Dynamically changing toolbar button color - need help - part 2

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

    Default Dynamically changing toolbar button color - need help - part 2

    Hey All,

    I am back on a prior answered thread due to feedback. Here is a link to the original thread. I have updated the fiddle 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

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

    Default

    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.

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

    Default

    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 is up to date.

Posting Permissions

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