Button text color in Extjs 4

Question

I'm using Exjts 4 and i want to change the button text color. Here is my code:

{
     xtype: 'button',
     text: 'My Button',
     style:{
         color: 'red'
     }  
}  

Answer 1

There is some strange behavior in Extjs 4.2.0, but there is an override possible. Give your button a class using cls:'yourClassName' property and then in CSS make a full path to span holding the text, like so: .yourClassName div a span. Also give your css property a !important value to successfuly override base class.

Ext.create('Ext.Button', {

    text: 'Click me',

    renderTo: Ext.getBody(),

    handler: function() {
        alert('You clicked the button!');
    },

    cls: 'foo'
});

and in css simply:

.foo div a span
{
    color:#ff0000 !important;
}

Here is a example.