How to split a panel in EXT-GWT?

Question

I'm using ext-gwt and can't figure out how to split a panel so that I have 2 widgets, one on each side of the resizeable splitter, with the height of both widgets being 100% and their widths being variable.

In essence, what I want is something like:

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

I tried it with BorderLayout, but I think I was doing it wrong and it wouldn't work (the vertical height of the widgets wouldn't take up the full screen). Can anyone help out? Here's the latest form of what I've tried:

 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);  
 }

Thanks!

Answer 1

Pretty simple really. First ensure that your Viewport has a fit layout. Then you can use a border layout like follows for you split. Add this panel to your viewport in your example. (Prefer border layouts to splitter just in case I want more areas later on) Then just add your data/widgets/panels to the two content panels.

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);  
  }  
}