View Full Version : change button bgcolor and text style

10 Aug 2013, 2:56 AM
I have a button in a window.
I need to apply styles to its text and a background color to the button.
But cls and labelStyle don't work.

new Ext.Window({
plain: true,
width: 700,
height: 30,
layout: 'fit',
items: [{
xtype: 'button',
cls: 'submit-btn',
labelStyle: 'font-weight: bold'
handler: confirmActivate.createDelegate(this, [campaignDataStore], true)
renderTo: 'activate-btn'

//CSS class
.submit-btn {
background - color: green!important;
background - image: none;

Please help..

11 Aug 2013, 3:58 PM
Why doesn't cls work? The cls config will add the CSS class to the outer most node for the button and with CSS you can target child elements easily.

11 Aug 2013, 10:44 PM
Doesn't work for me.
Could it be a bug in Ext-3.3.1?
I tested on Firefox 22.

12 Aug 2013, 12:40 AM
The CSS in your example code isn't valid. You have spaces in the class name, and in the properties...

12 Aug 2013, 5:50 AM
That's not the problem.
When I formatted the code using JSFormatter, it injected the space.
Anyway, I have removed the space.
Also the 'font-weight: bold' has no effect
Thanks for looking into it though.

12 Aug 2013, 10:26 AM
Please help with this. I am going crazy.
Here is the entire code.
I am using .Net and ext-3.4 here

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="MyQuuWeb.Admin.Test" %>

<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.my-btn .x-btn-inner {
border-color:#FFFFFF !important;
font-size: 40px !important;
font-weight: bold !important;
font-family: 'Arial' !important;
background-image: none;
background-color: Green !important;

<script language="javascript" type="text/javascript" src="../Javascripts/ext-3.4.1/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="../Javascripts/ext-3.4.1/ext-all.js"></script>

<script language="javascript" type="text/javascript">


var activateButtonWindow = new Ext.Window({
id: 'activateButtonWindow',
closable: false,
resizable: false,
draggable: false,
plain: true,
frame: false,
shadow: false,
width: 700,
height: 30,
layout: 'fit',
items: [{xtype: 'button', text: 'FINAL STEP: START BLAST', cls: 'my-btn',
handler: function(){}
renderTo: 'activate-btn'


<div id="activate-btn" style="width: 700px; height: 30px; float: left">

12 Aug 2013, 10:37 AM
Inspect the DOM. Look to see what styles are on what nodes and see how you can override them. This took me little over a minute to look at the DOM and remove the background images to have it be solid green with white text.

This simple button:

new Ext.Button({
renderTo : document.body,
text : 'Foo',
cls : 'my-button'

With this CSS:

.my-button {
background-color : green;

.my-button button {
color : white;

.my-button .x-btn-mc,
.my-button .x-btn-ml,
.my-button .x-btn-mr,
.my-button .x-btn-tc,
.my-button .x-btn-tl,
.my-button .x-btn-tr,
.my-button .x-btn-bc,
.my-button .x-btn-bl,
.my-button .x-btn-br {
background-image : none;

12 Aug 2013, 9:58 PM
When I applied your CSS classes to my code posted above, it made the panel containing the button green and removed the text of the button.