Results 1 to 7 of 7

Thread: [2.1.1] Icon in button over text

  1. #1
    Ext User
    Join Date
    Dec 2009
    Location
    Netherlands
    Posts
    11

    Default [2.1.1] Icon in button over text

    Hello, in my GWT-Application I often see the icon of buttons are placed wrong.
    Normally the button has a little icon on the left and next to it the text.

    When setText is invoked a 2nd time, the icon moves over the text and the button looks weird.

    The code is a little bit too complex to put here, but this is basicly how it works;
    - The button will be created in the class-constructor
    Code:
    Button insertButton = new Button("Toevoegen");
    insertButton.addListener(Events.Select, handler);
    insertButton.setIcon(IconProvider.ADD_ICON);
    - After selecting a category, the text in the button changes and the button will be added to a panel
    Code:
    insertButton.setText("Toevoegen van " + type.getDisplayName());
    verticalPanel.add(insertButton);
    The first time it displays as it should, the second time it's always wrong...

    I checked the source code (using firefox) to see what the difference is between the good and the bad version:
    Good:
    Code:
    <button tabindex="0" class="x-btn-text " type="button" style="position: relative; width: 164px;">
        Toevoegen van grondstoffen
        <img class=" x-btn-image" role="presentation" src="http://127.0.0.1:8888/weerribben/clear.cache.gif" style="width: 16px; height: 16px; background: url(&quot;icons/dbe-add.gif&quot;) no-repeat scroll 0px 0px transparent; position: absolute; left: -19px; top: -2px;" border="0">
    </button>
    Bad:
    Code:
    <button tabindex="0" class="x-btn-text " type="button" style="position: relative; width: 164px;">
        Toevoegen van grondstoffen
        <img class=" x-btn-image" role="presentation" src="http://127.0.0.1:8888/weerribben/clear.cache.gif" style="width: 16px; height: 16px; background: url(&quot;icons/dbe-add.gif&quot;) no-repeat scroll 0px 0px transparent; position: absolute; left: 0px; top: 0px;" border="0">
    </button>
    As you can see (when you scroll to the right), with the good version the icon is displayed using a left:-19px and top -2px, while with the bad version the icon starts at 0, 0
    Last edited by Beekman; 21 Aug 2010 at 6:01 AM. Reason: textual bug

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    This should allready be fixed. Can you try this against GXT 2.2 RC1?

    If that is not working for you, please post a fully working testcase that implements EntryPoint.

  3. #3
    Ext User
    Join Date
    Dec 2009
    Location
    Netherlands
    Posts
    11

    Default

    It is not working for me... I've tried it with gxt 2.2.0

    *code deleted*
    Last edited by Beekman; 21 Aug 2010 at 7:38 AM. Reason: Incorrect code deleted

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Works without any problems for me. Is there anything more in need to do to reproduce it? Also with GXT 2.2 RC1 setIcon gets only called once.

    Also you should not use HorizontalPanel in your application. You are much better when you use a LayoutContainer with a HBoxLayout.

  5. #5
    Ext User
    Join Date
    Dec 2009
    Location
    Netherlands
    Posts
    11

    Default

    I'm sorry, the problem I had with the previous post was something else...

    With this code you can reproduce it (although it uses the GWT-vertical panel)
    Code:
    package test.client;
    
    import com.extjs.gxt.ui.client.event.BaseEvent;
    import com.extjs.gxt.ui.client.event.Events;
    import com.extjs.gxt.ui.client.event.Listener;
    import com.extjs.gxt.ui.client.util.IconHelper;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.VerticalPanel;
    
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class Test implements EntryPoint {
        
        /** De toevoegen-knop, waardoor het toevoegen-scherm opgeroepen wordt */
        private final Button btn = new Button(" Click me!");
        
        /** The panel */
        private VerticalPanel panel = new VerticalPanel();
        
        /** The click counter */
        private int counter = 0;
        
        /**
         * This is the entry point method.
         */
        public void onModuleLoad() {
            
            
            btn.setIcon(IconHelper.create("continue.gif"));
            panel.add(btn);
            btn.addListener(Events.Select, new Listener<BaseEvent>() {
                public void handleEvent(BaseEvent be) {
                    panel.clear();
                    btn.setText(" Test this button " + ++counter);
                    panel.add(btn);
                    RootPanel.get().add(panel);
                }
            });
            RootPanel.get().add(panel);
        }
    }

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Yes that is a known problem. change the button text while it is attached to the document:

    btn.setText(" Test this button " + ++counter);

    after

    RootPanel.get().add(panel);

  7. #7
    Ext User
    Join Date
    Dec 2009
    Location
    Netherlands
    Posts
    11

    Default

    Thanks for the quick replies!

Similar Threads

  1. Icon button and text for FileUploadField
    By tbadger in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 10 Nov 2009, 1:51 PM
  2. [Button] Text over icon
    By fdupont in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 7 Sep 2009, 10:54 AM
  3. How to add a search icon next to Text Button
    By Hariharanr in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jul 2008, 6:10 AM
  4. Button text align: Text under icon-button
    By behlma in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 8 Jun 2007, 9:56 AM

Posting Permissions

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