PDA

View Full Version : HOWTO: Display a Button as Link for GXT 1.x



ilkin
9 Dec 2009, 5:39 AM
if you have a button but need to display it as a normal link:


http://www.extjs.com/forum/attachment.php?attachmentid=17155&d=1258015672

usage:


Button button1 = new Button("Search 1", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
// do something
}
});
Button button2 = new Button("Search 2", new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
// do something
}
});

// style the second button as a link:
button2.addStyleName("button-link");

you need to add this css:

/* Button as link --*/
.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-left,
.button-link .x-btn-center,
.button-link .x-btn-right {
background-image: none !important;
}

/* remove little dots in FF */

.button-link .x-btn-left i,
.button-link .x-btn-cener i,
.button-link .x-btn-right i{
font-size: 0px;
}
/* Button as link */

Arno.Nyhm
10 Dec 2009, 6:24 AM
dont forget this credits ;)


this is based on this posting:

HOWTO: Display a Button as Link (for GXT 2.0) by Arno.Nyhm
http://www.extjs.com/forum/showthread.php?p=407849#post407849

abs2010
24 Feb 2010, 3:28 AM
thanks, this is indeed a good example :)