如何在EXT-GWT中拆分面板？

Question

我正在使用ext-gwt，並且無法弄清楚如何拆分面板，以便我有兩個小部件，一個位於可調整大小的拆分器的兩側，兩個小部件的高度均爲100％，寬度可變。

從本質上說，我想是這樣的：

----------------------------------------- 
| Widget1   | Widget2   | 
|     |     | 
|     |     | 
|     |     | 
|     |     | 
|    <-|->     | 
|     |     | 
|     |     | 
|     |     | 
|     |     | 
----------------------------------------- 

我的BorderLayout嘗試過，但我想我是做錯了，它是行不通的（小工具的垂直高度止跌」不佔用全屏）。任何人都可以幫忙嗎？這裏是我嘗試過的最新形式：

public void onModuleLoad() { 
    Viewport v = new Viewport(); 
    v.setLayout(new RowLayout(Orientation.HORIZONTAL)); 

    ContentPanel panel1 = new ContentPanel(); 
    panel1.setHeading("Panel 1"); 

    ContentPanel panel2 = new ContentPanel(); 
    panel2.setHeading("Panel 2"); 

    v.add(panel1, new RowData(.3, 1)); 
    v.add(new SplitBar(LayoutRegion.EAST, panel1)); 
    v.add(panel2, new RowData(.7, 50)); 

    RootPanel.get().add(v); 
} 

謝謝！

Answer 1

真的很簡單。 首先確保您的視口具有合適的佈局。 然後，您可以使用如下的邊框佈局進行分割。在您的示例中將此面板添加到您的視口。 （爲了以後我需要更多區域，首選邊框佈局） 然後，只需將您的數據/小部件/面板添加到兩個內容面板即可。

package com.gerharddavids.example; 

import com.extjs.gxt.ui.client.Style.LayoutRegion; 
import com.extjs.gxt.ui.client.util.Margins; 
import com.extjs.gxt.ui.client.widget.ContentPanel; 
import com.extjs.gxt.ui.client.widget.LayoutContainer; 
import com.extjs.gxt.ui.client.widget.layout.BorderLayout; 
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData; 
import com.google.gwt.user.client.Element; 

public class BorderLayoutExample extends LayoutContainer { 

    protected void onRender(Element target, int index) { 
    super.onRender(target, index); 
    final BorderLayout layout = new BorderLayout(); 
    setLayout(layout); 
    setStyleAttribute("padding", "10px"); 

    ContentPanel west = new ContentPanel(); 
    ContentPanel center = new ContentPanel(); 

    //uncomment this section if you dont want to see headers 
    /* 
    * west.setHeaderVisible(false); 
    * center.setHeaderVisible(false); 
    */ 

    BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150); 
    westData.setSplit(true); 
    westData.setCollapsible(true); 
    westData.setMargins(new Margins(0,5,0,0)); 

    BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER); 
    centerData.setMargins(new Margins(0)); 

    add(west, westData); 
    add(center, centerData); 
    } 
}