CODEWITHSUNDEEP
cssbuttonextjsextjs4
Alejandro Mosquera
Alejandro Mosquera

Reputation: 331

Button text color in Extjs 4

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'
     }  
}

Upvotes: 5

Views: 19017

Answers (3)

Marshal
Marshal

Reputation: 4880

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.

Upvotes: 4

Davor Zubak
Davor Zubak

Reputation: 4746

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.

Upvotes: 3

Alejandro Mosquera
Alejandro Mosquera

Reputation: 331

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

Upvotes: 7

Related Questions