Grid resize problem in TabPanel

[jrk]

I am having a problem getting a Grid to resize correctly when a browser window is made smaller. Everything works fine when the browser window is made bigger. The Grid is contained in a TabPanel. I have tried different combinations of Layouts for both the TabItem and the LayoutContainer which contains the Grid with no success. I have also tried programmatically calling syncSize() on the Grid, also with no success.

Here is my setup:

Brower: IE7
GWT: GWT 2.0.0
GXT: 2.1.0

Here is test case to reproduce the problem:



package com.gxttest.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.store.ListStore;
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.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GXTTest implements EntryPoint {

private Grid<Item> grid;
private ContentPanel panel;

/**
* This is the entry point method.
*/
public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new RowLayout(Orientation.VERTICAL));

RowData cdata = new RowData(1, 1, new Margins());
viewport.add(createContent(), cdata);

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

public LayoutContainer createContent() {
//
LayoutContainer details = new LayoutContainer();
details.setLayout(new FitLayout());

TabPanel tabs = new TabPanel();
tabs.setAutoHeight(true);
tabs.setAutoWidth(true);
tabs.setPlain(true);

TabItem test2 = new TabItem("Tab2");
test2.setLayout(new RowLayout(Orientation.VERTICAL));

ListStore<Item> store = new ListStore<Item>();
store.add(getItems());

ColumnConfig field1 = new ColumnConfig("field1", "field1", 60);
ColumnConfig field2 = new ColumnConfig("field2", "field2", 20);
ColumnConfig field3 = new ColumnConfig("field3", "field3", 20);

List<ColumnConfig> config = new ArrayList<ColumnConfig>();
config.add(field1);
config.add(field2);
config.add(field3);
ColumnModel cm = new ColumnModel(config);

grid = new Grid<Item>(store, cm);
grid.setBorders(true);
grid.setAutoExpandColumn("field1");
grid.setAutoWidth(true);
grid.getView().setForceFit(true);

LayoutContainer lc = new LayoutContainer();
lc.setLayout(new RowLayout(Orientation.VERTICAL));
lc.add(grid, new RowData(1,1,new Margins(0)));
lc.setAutoWidth(true);
lc.setHeight(250);


test2.add(lc, new RowData(1,-1,new Margins(0)));
tabs.add(test2);

details.add(tabs);

//
LayoutContainer viewer = new LayoutContainer();

//
LayoutContainer parent = new LayoutContainer();
parent.setLayout(new RowLayout(Orientation.HORIZONTAL));
parent.add(details, new RowData(0.6 , 1));
parent.add(viewer, new RowData(0.4 , 1));

return parent;
}

public ArrayList<Item> getItems() {
ArrayList<Item> items = new ArrayList<Item>();
Item item = new Item();
item.setField1("a");
item.setField2("b");
item.setField3("c");
items.add(item);
item = new Item();
item.setField1("d");
item.setField2("e");
item.setField3("c");
items.add(item);
return items;
}

}