PDA

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



Nakata12
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;
background:none;
background-image:none;
padding: 0px;
color: #4784C3;
text-decoration: underline;

}


logic way would be :
b.setStyleName("button-link");



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.

Question:
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

Arno.Nyhm
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

Arno.Nyhm
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...
http://extjs.com/forum/showthread.php?t=78510

Arno.Nyhm
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