View Full Version : Remove all ext classes from Button add/setStyleName

24 Aug 2009, 4:11 AM
Hello I have a button simple as hell:

Button b = new Button( "Edit" ) ;

I want to remove all css values from it and set as only class

.button-link {
cursor: pointer;
cursor: hand;
border: none;
/* Disable the button-style */
background-color: transparent;
padding: 0px;
color: #4784C3;
text-decoration: underline;


logic way would be :

My problem:
with setStyle as well as with addStyle i get the new class applied but also still i have the old (ext) class on it.

How can i remove all ext classes from that spezific button.

Thank you very much, i also searched the forum but i could not find an answer which realy was an answer for this

24 Aug 2009, 4:25 AM
if you look at the code:

before rendering: setStyleName acts like addStyleName
after rendering: setStyleName works as espected.

first workaround:
call your setStyleName after rendering (for example in a DeferredCommand)

second workaround:
add a !important to all css properties to force it

24 Aug 2009, 4:26 AM
and i think its a bug (by design) that setStyleName works different in before/after rendering...

i created a bug...

24 Aug 2009, 5:04 AM
I want to remove all css values from it and set as only class

.button-link {

but your css dont remove completely all styles. you need to remove some more of the button images ...

i find out this css makes a "link" from a button with css:

.button-link .x-btn-text {
cursor: pointer !important;
cursor: hand !important;
border: none !important;
/* Disable the button-style */
background-color: transparent !important;
background:none !important;
background-image:none !important;
padding: 0px !important;
color: #4784C3 !important;
text-decoration: underline !important;


/* remove images */

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

/* remove little dots in FF */

.button-link .x-btn-tl i,
.button-link .x-btn-tr i,
.button-link .x-btn-tc i,
.button-link .x-btn-ml i,
.button-link .x-btn-mr i,
.button-link .x-btn-mc i,
.button-link .x-btn-bl i,
.button-link .x-btn-br i,
.button-link .x-btn-bc i {
font-size: 0px;

PS: if you have a better css then can you post this here?

EDIT: new HOWTO thread with this http://www.extjs.com/forum/showthread.php?p=407849#post407849