Results 1 to 9 of 9

Thread: HOWTO: Display a Button as Link

  1. #1
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
      0  

    Default HOWTO: Display a Button as Link

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


    Button-Link.PNG

    usage:

    PHP Code:
            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:

    PHP Code:
    .button-link .x-btn-text {
        
    cursorpointer !important;
        
    cursorhand !important;
        
    bordernone !important;
        
    /* Disable the button-style */
        
    background-colortransparent !important;
        
    background:none !important;
        
    background-image:none !important;
        
    padding0px !important;
        
    color#4784C3 !important;
        
    text-decorationunderline !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-imagenone !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-size0px;

    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/showthrea...038#post378038
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts Search Results Advanced Search form Category overview http://www.extjs.com/forum/showthrea...041#post410041

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Posts
    102
    Vote Rating
    6
      0  

    Default

    Why use a button as a hyperlink if you can use a Hyperlink as a Hyperlink?

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976
    Vote Rating
    131
      0  

    Default

    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.

  4. #4
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
      0  

    Default

    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

    PHP Code:
      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" ;-)
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts Search Results Advanced Search form Category overview http://www.extjs.com/forum/showthrea...041#post410041

  5. #5
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
      0  

    Default

    pls open a new thread with this question in help section. then you have the best chances for an answer :-)
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts Search Results Advanced Search form Category overview http://www.extjs.com/forum/showthrea...041#post410041

  6. #6
    Sencha User
    Join Date
    Jul 2008
    Posts
    89
    Vote Rating
    0
      0  

    Default

    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?

  7. #7
    Ext User
    Join Date
    Jun 2010
    Posts
    4
    Vote Rating
    0
      0  

    Default

    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.

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    4
    Vote Rating
    0
      0  

    Default

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

  9. #9
    Ext User babyblue's Avatar
    Join Date
    May 2009
    Posts
    47
    Vote Rating
    0
      0  

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •