ExtJS - How to customize buttons?

Question

I need to create some custom buttons - like a red button with white text, green button with white text, etc.

I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.

ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.

Which css properties should I override/define in order to create my own buttons?

Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim

Answer 1

simply, every form component has a property called "cls". So you can use the following:

cls: 'myclass'

Edit for the last issue:

You have to override the x-btn-focus class, to remove/replace the blue background color:

.x-btn-focus.green-button { 
  background:#46a546;
}

Edit of your your fiddle's css:

.green-button{
    background:#46a546;
    border: none;!important;
    color: #ffffff;!important;
}

.green-button .x-btn-inner {
    color: #ffffff;
}


.green-button-over {
    background: #4cc54c;
    border: none;
}


.x-btn-over.green-button {
    background: #4cc54c;
    border-color: #4cc54c;
}

.x-btn-pressed.green-button {
    background: #5b9f5b;
    border-color: #5b9f5b;
}
.x-btn-focus.green-button { 
  background:#46a546;
}

Answer 2

Try using these css classes :

.x-btn-over.green-button

and

.x-btn-pressed.green-button

I don't know if this is preferable to defining and using a custom UI but it's a quick fix.

Hope it helps

Pedro

EDIT (adding css as in comment below)

.x-btn-over.green-button {
    background: #4cc54c;
    background-color: red !important;
    background-image: none;
}
.x-btn-pressed.green-button {
    background: yellow;
    background-color:yellow !important;
    border:solid 1px red !important;
}

Added some random properties you might need background-image, etc