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

In case someone needs it. I do not know if it's a dirty solution but it works

{
 xtype: 'button',
 text: '<div style="color: red">My Button</div>',     
}  

Answer 2

Davor Zubak shed light on a solution although it failed in my complex application. I achieved what I want by this:

1. Button's cls: 'myButton'

2. In my css file, define:

   .myButton .x-btn-inner {
       color: red;
       font-family: Georgia;
       font-size: large;
       font-weight: bold;
   }
   

This way it only overrides the ExtJS theme for the particular buttons who have 'myButton' cls.

Answer 3

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.