1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Answers
    1
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

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

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


    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

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Depends. You can switch UIs, add/remove a CSS class...
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Answers
    1
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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');
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Answers
    1
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    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.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Answers
    1
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


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

  9. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Answers
    1
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1