Button text color in Extjs 4

Question

I am 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

Extjs 4.2.0 has some weird behavior, but overriding is possible. Give button a class class using the cls:'yourClassName' , and then in CSS make the full path to the span , holding the text like this: .yourClassName div a span . Also give your property css ! Important to successfully override the base class.

 Ext.create('Ext.Button', { text: 'Click me', renderTo: Ext.getBody(), handler: function() { alert('You clicked the button!'); }, cls: 'foo' }); 

and in css just:

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

Here is an example.

Answer 2

If someone needs it. I don't know if this is a dirty solution, but it works

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

Answer 3

Davor Zubak shed light on the solution, although this failed in my complex application. I achieved what I want:

• Cls button: 'myButton'

• In my css file, define:

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

Thus, it only redefines the ExtJS theme for specific buttons that have "myButton" cls.