View Full Version : Rendering components in grids

15 Apr 2009, 1:15 AM

we are currently on the verge of defining and implementing a generic description mechanism for UI controls. The render implementation uses mainly GXT components.

For table like components we want to use Grid elements. But we don't want to be restricted to only rendering strings but also want to render components (or more generic: widgets).

I know from other older posts that the use of the Table components is encouraged when rendering widgets, on the other hand the Table seems to be old and getting deprecated.

So we started with a solution (with a button as an example widget) that does the following:

// in the GridCellRenderer:

public String render(GwtCellData cellData, String property, ColumnData config, int rowIndex, int colIndex, ListStore<GwtCellData> store) {
final Widget widget = forwardToRender(cellData.getValue());

Element div = DOM.createDiv();
if (widget instanceof Component) {
Component component = (Component) widget;

String htmlcode = div.getInnerHTML();
return htmlcode;

public Widget forwardToRender(String value) {
final Button button = new Button(value);

DeferredCommand.addCommand(new Command() {
* {@inheritDoc}
public void execute() {
Element element = DOM.getElementById(button.getId());
Element buttonEl = (Element) element.getElementsByTagName("button").getItem(0);
DOM.sinkEvents(buttonEl, Event.ONCLICK);
DOM.setEventListener(buttonEl, new EventListener() {

* {@inheritDoc}
public void onBrowserEvent(Event event) {
BaseEvent base = new ComponentEvent(button);
button.fireEvent(Event.ONCLICK, base);


return button;
The code is a merge of several classes and reduced to the essentials.

The key point is that we generate the HTML of a widget and return it to the renderer as a string. We then add listeners for the basic events via a deffered command to the component that should be part of the DOM at that time.
This of course depends on the DOM implementation of the component and requires to bind all required events manually.

Our questions are:

Is there a better solution?
Can we be sure that this solution doesn't run into memory leaks?
Thanks for any help,

21 Apr 2009, 10:20 PM
Hi again,

is there anybody who could help us with this issue?

Kind regards,

27 Apr 2009, 1:47 PM
Can we be sure that this solution doesn't run into memory leaks?

You will run into memory leaks as you setup eventlistener and dont remove them.

27 Apr 2009, 10:29 PM
Thanks, Sven.

Do you know how we can prevent them? How can we release the event capturing/remove the event listener? I didn't find a suitable method in the DOM class API.


29 Apr 2009, 12:20 PM
Event listeners should be set on attach, and removed on detach. Look at Widget.onAttach and Widget.onDetach for an example. This ensures listeners are only set while the widget is part of the DOM.