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

[ilkin]

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




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]

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/showthrea...849#post407849

[abs2010]

thanks, this is indeed a good example