当 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 中元素的 id，并将 Widget 放置在该元素内。

我没有使用过 Ext-GWT，但您可以使用 HTMLPanel 或在 Ext-GWT 中搜索等效项。

Answer 2

您还可以将现有的 div 包装在 HTML 面板中。

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