ExtJS Dynamically Change Button Background Color Based on Color Picker

Question

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', });

Answer 1

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