PDA

View Full Version : change button bgcolor and text style



raj_plays
10 Aug 2013, 2:56 AM
Hi,
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',
text: 'FINAL STEP: START BLAST',
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..

mitchellsimoens
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.

raj_plays
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.

willigogs
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...

raj_plays
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.

raj_plays
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" %>






<html>
<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;
}
</style>


<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">

Ext.onReady(function()
{
Ext.QuickTips.init();

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

activateButtonWindow.show();
});
</script>
</head>

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

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

raj_plays
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.