change button backgorund color within a toolbar

Question

I want to change the background color of a button in a toolbar. I need this button to show a summary-value.

I tried with

cls: 'button-matching-auto', 

and in css-file

.x-btn-button .button-matching-auto {
    background-color: #10E0E0;
}

No effect.

Then i tried with

style: {color:'red'}, 

It's the same: no effect

In Developer Tools of chrome i can see, that the colors were applied, but not visible.

What's wrong?

Answer 1

"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button

{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}

... if you only want the default look and feel of a button not the gray one ...

I've done this to change the look and feel to get the default one:

dockedItems: [{
        xtype: 'toolbar',
        layout: {
            pack: 'center'
        },
        defaultButtonUI: 'default', // get default look and feel
        dock: 'bottom',
        items: [{
            xtype: 'button',
            width: 200,           
            text: 'Download to Excel',

        },{
            xtype: 'button',
            width: 200,           
            text: 'Another action',

        }]