PDA

View Full Version : [2.1.1] Icon in button over text



Beekman
21 Aug 2010, 6:00 AM
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

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

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

sven
21 Aug 2010, 6:26 AM
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.

Beekman
21 Aug 2010, 7:13 AM
It is not working for me... I've tried it with gxt 2.2.0

*code deleted*

sven
21 Aug 2010, 7:17 AM
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.

Beekman
21 Aug 2010, 7:37 AM
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)

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);
}
}

sven
21 Aug 2010, 7:43 AM
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);

Beekman
21 Aug 2010, 8:10 AM
Thanks for the quick replies!