如何在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); 
    } 
}