HOWTO: Display a Button as Link

[Arno.Nyhm]

if you have a button but need to display it as a normal link:


17155

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










Ref: this is a copy from this posting: http://www.extjs.com/forum/showthread.php?p=378038#post378038

[campersau1]

Why use a button as a hyperlink if you can use a Hyperlink (http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/Hyperlink.html) as a Hyperlink?

[sven]

Yes, it is the wrong approach. It is not performant and the domlayout is just too big. You can simple use a Html component with an markup of an a tag. I really suggest to not use this approach and use the orginal a tags.

Just assign an onclick listener, stop the event and do the default action.

[Arno.Nyhm]

if someone like to display fast and easy a button like a link and dont like to care how to do the html component stuff etc. then this is a easy way to switch the style.

and you can use it also like a normal button and place it in forms like



myFormPanel.addButton(button1);
myFormPanel.addButton(button2);
and there is no more footprint compared with a normal button. its just an other layout with css.

if someone need a html link and/or the history stuff etc. then other solutions maybe better.
and this is not a "howto: make a html link" ;-)

[Arno.Nyhm]

pls open a new thread with this question in help section. then you have the best chances for an answer :-)

[Algiano]

This is highliy inefficient but it does present an advantage when using ContentPanels and their in-built ButtonBar.

Sven - is there any way of building a hyperlink type button that can be added to a ContentPanel using the addButton() method?

[simbasong]

Yeah, I am always trying to find a GXT component as similar to GWT's HyperLink or Anchor classes, but not found. I think if these component is added to GXT library, so we can easily use ContentPanel.getButtonBar.add() to add it to the Content Panel.

[simbasong]

I just find another way to do it, by using ContentFormPanel.getButtonBar().add(new WidgetComponent(new Anchor("this is a GWT link!")));

[babyblue]

I'm trying to remove the border on a button, this code doesn't seem to work for me. I copied the style into a CSS file that I'm already using, and set the style name like you did, but I don't see any changes.