How can I replace a div with a widget when it is already contained in another widget?

Question

context: I'm using Ext-GWT and I think ListView is the right layout for what I need. My problem is that I have to use a HTML template for all of my items, but I want to build GWT/Ext-GWT widgets instead, so I'm using div placeholders that I will replace with the proper widgets.

How can I replace my div with a widget? my first attempt was to use RootPanel.get('div-id') but apparently you can't create a RootPanel that is in a widget (I used debug mode to step through the code till I found that silent exception).

public class TicketContainer extends LayoutContainer {

    private ArrayList<BasicTicket> tickets;

    public TicketContainer(ArrayList<BasicTicket> tickets) {
        this.tickets = tickets;
    }

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        setLayout(new FlowLayout(1));

        ListStore<BasicTicket> store = new ListStore<BasicTicket>();
        store.add(this.tickets);

        ListView<BasicTicket> view = new ListView<BasicTicket>(store);

        view.addListener(Events.Refresh, new Listener<BaseEvent>() {

            @Override
            public void handleEvent(BaseEvent be) {
                for (BasicTicket ticket : tickets) {
                // At this point I need to find the div with the id
                // "ticket_"+ticket.getId() and replace it with a GWT
                // widget that I can add events to and enable drag and drop
                }
            }
        });

        add(view);

    }

    private native String getTemplate() /*-{
        return ['<tpl for=".">', 
        '<div id="ticket_{id}"></div>',
        '</tpl>'].join("");
    }-*/;

}

The full source is at https://code.launchpad.net/~asa-ayers/+junk/Kanban if you need additional context in the code.

Answer 1

In "pure" GWT, the answer would be to use HTMLPanel:

String id = DOM.createUniqueId();
HTMLPanel panel = new HTMLPanel("<div class=\"content\" id=\"" + id + "\"></div>");

panel.add(new Label("Something cool"), id);

As you can see, the com.google.gwt.user.client.ui.HTMLPanel.add(Widget, String) takes the id of an element withing the HTMLPanel and places the Widget inside that element.

I haven't used Ext-GWT, but you can either use HTMLPanel or search for an exquivalent in Ext-GWT.