3

I have a Sencha ExtJS application where the user enters some data into an input form and then selects a color associated with that item. After they click the save button in the form the form closes and creates a button for the new item. I am basically trying to figure out how to change the background color of the button to correspond to what the user selects. I have done a bunch of searching and found the majority do it via CSS and setting the cls property. That would be fine if I crated a line in the css file for every color in the color picker but there must be a way to dynamically set the button background color when the color is not know up front.

layoutRoot.down('#pnlTest').add({ xtype: 'button', text: obj.name, height: 25, width: 125, margin: '5', });
Josh
  • 569
  • 1
  • 11
  • 35

3 Answers3

5

It's a bit unreasonable to have a class per colour! You should be able to manually set the style using the style attribute. Just replace the hex string with your variable.

{
    xtype: 'button', 
    text: obj.name, 
    height: 25, 
    width: 125, 
    margin: '5', 
    style: {
        background: '#FF5566'
    }
}

Relevant docs (docs are for ExtJs version 5.0 but the feature has been available since 1.1.0) http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-cfg-style

Lesley.Oakey
  • 358
  • 1
  • 7
5

Create rgb string from your color picker (syntax here may change depending on how your picker is returning the color)
var rgb = [picker.r, picker.g, picker.b];
var string = 'rgb(' + rgb.join(',') + ')'

Get the button using its ID

var button = Ext.getCmp('Your_button_ID');

Change button color

button.getEl().dom.style.background = string;
Mouhcine
  • 276
  • 1
  • 2
  • 12
2

did you try removeCls and then addCls method defined for the button to change color when required?

Try removeCls method to remove the existing CSS if any, and then set the background-color you want to in a different css class and add that CSS class to button using addCls method.

Rini Rachel
  • 29
  • 4