Как я могу заменить div на виджет, если он уже содержится в другом виджете?

Question

Я использую Ext-GWT и думаю, что ListView - это правильный макет для того, что мне нужно. Моя проблема в том, что я должен использовать шаблон HTML для всех своих элементов, но вместо этого я хочу создавать виджеты GWT / Ext-GWT, поэтому я использую div заполнителей, которые заменю соответствующими виджетами.

Как мне заменить div на виджет? Моей первой попыткой было использование RootPanel.get('div-id'), но, очевидно, вы не можете создать RootPanel, который находится в виджете (я использовал режим отладки для пошагового выполнения кода, пока не обнаружил это тихое исключение).

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("");
    }-*/;

}

Полный исходный код: https://code.launchpad.net/~asa-ayers/+junk/Kanban, если вам нужен дополнительный контекст в коде.

Answer 1

В «чистом» GWT ответом будет использование HTMLPanel:

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

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

Как видите, com.google.gwt.user.client.ui.HTMLPanel.add(Widget, String) берет идентификатор элемента с HTMLPanel и помещает Widget внутри этого элемента.

Я не использовал Ext-GWT, но вы можете использовать HTMLPanel или выполнить поиск эквивалента в Ext-GWT.

Answer 2

Вы также можете заключить существующий элемент div в панель HTML.

HTMLPanel newPanel = HTMLPanel.wrap(Document.get().getElementById("yourDivId"));
newPanel.add(your_widget);