How To Split A Panel In Ext-gwt?

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 th

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