How to split a panel in EXT-GWT?

Question

I use ext-gwt and I can’t figure out how to split the panel so that I have 2 widgets, one on each side of the resizable splitter, both widgets being 100% high and their width is variable.

In essence, I want something like:

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

I tried this with BorderLayout, but I think that I am doing it wrong and it will not work (the vertical height of the widget will not occupy the entire screen). Can anyone help? Here is the last form of what I 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. First make sure your Viewport has the right layout. You can then use the border layout as shown below for separation. Add this panel to your viewport in your example. (Prefer the location of the borders for the splitter just in case I want more areas later) 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); } }