ExtJS - How to customize buttons?


Tags: javascript,html,css,extjs,extjs4

Problem :

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



Solution :

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

    CSS Howto..

    Simple html page renders differently in Firefox and IE. How to fix it?

    In Python, I can print HTML to the browser, how can I ensure that the CSS that relates to it also get “printed”

    How to set style if the content is X [duplicate]

    html/css - using sprite with tag - how to remove the outline in Chrome?

    How to stick a div when scrolled past 50% of the item?

    How to start a css animation from current position

    CSS - how to get position: absolute; to work well with different screen sizes

    how can i get a css table-cell link not to stretch the clickable area

    How to make a colorful gradient glow around your input-box?

    How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

    How to create an easy responsive grid with one column and two boxes?

    How to paste a style sheet into a new document window in a Rally app

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to override CSS style for a specific element if its parent has a specific class

    How to assign CSS to images which have specific extension, height and width?

    How to apply default CSS styling to all HTML pages

    How to set shadow on top of a CSS border?

    How to animate searchbox length from focusing on the textbox class CSS3?

    Cutting out the middle portion of an image (example shown)?

    How to add css-keyframes to vaadin components?

    how would I have the image in this div with rollover not get the overlay?

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

    How to select “label for=list[]” in CSS?

    How to add a twitter-bootstrap icon as a CSS background-image?

    How to Center Rotated text with CSS

    how to show different image in div per the screen size?

    How to create a CSS shade effect with a faded sidebar

    How to add a class to select_tag in Ruby on Rails

    how to customize css ellipse for a text string [duplicate]

    How can i get bootstrap to alter page CSS instead of lay dormant?