GWT從DOM分離小部件並添加到面板

Question

我需要能夠從DOM分離節點並將其在運行時使用GwtQuery附加到HorizontalPanel 。

我的代碼如下所示：

    @PageShown
    public void pageReady() {
        horizontalPanel.add($("#bar1").widget());
        horizontalPanel.add($("#bar2").widget()); 
        horizontalPanel.add($("#bar3").widget());   
    }

其中#bar1等。 Al已經安裝在DOM中，我需要做的是將這3個橫條水平堆疊，因此我需要將它們附加到Horizo​​ntalPanel。

更新：

將DOM元素提升到Panel中之后， horizontalPanel仍然為空：

<table cellspacing="0" cellpadding="0" data-field="navPanel"><tbody><tr></tr></tbody></table>

Answer 1

$("#bar1")應該是gwt-widget，否則gQuery的方法widget()將返回null。

不過，您可以使用gQuery將某些dom元素提升為小部件：

    // Promote 3 elements attached to the dom to 3 GWT Panel Widgets
    $("#bar1, #bar2, #bar3").as(Widgets).panel();

    horizontalPanel.add($("#bar1").widget());
    horizontalPanel.add($("#bar2").widget()); 
    horizontalPanel.add($("#bar3").widget());

除了panel()促進向GWT的元件Panel ，所述gQuery Widgets插件有其它預定義的方法等label() textBox() passwordBox()和textArea() 但是，您可以編寫自己的WidgetFactory來通過方法widgets(WidgetFactory)將任何dom元素提升為自定義窗口widgets(WidgetFactory) 。

無論如何，如果您只想在頁面中布局元素，一種更簡單的方法可能是使用css而不是將它們包裝到小部件中。