Grid scrolling in a border layout

[rons2112]

I am unable to get my grid to scroll when it is inside of a border layout. I can scroll with the mousewheel, however I can not seem to get scroll bars to show up within the grid itself.

When I set the scrollMode for the content panel in which the grid lives, I get scroll bars, however they are for the panel themselves, not the grid, and it scrolls the heading of my grid out of view.

Below is the sample page I have set up for this.
Thanks,
Ron

 
import com.extjs.gxt.ui.client.GXT;
 
import com.extjs.gxt.ui.client.data.BaseModelData;
 
 
 
 
import com.extjs.gxt.ui.client.store.ListStore;
 
 
 
 
import com.extjs.gxt.ui.client.util.Theme;
 
 
 
 
import com.google.gwt.core.client.EntryPoint;
 
 
 
 
import com.google.gwt.user.client.Element;
 
 
 
 
import com.extjs.gxt.ui.client.widget.Dialog;
 
 
 
 
import java.util.ArrayList; 
 
 
 
 
import java.util.List; 
 
 
 
import com.extjs.gxt.ui.client.widget.TabItem; 
 
 
 
import com.extjs.gxt.ui.client.widget.TabPanel; 
 
 
 
 
import com.google.gwt.core.client.EntryPoint; 
 
 
 
 
import com.google.gwt.user.client.ui.RootPanel; 
 
 
 
 
import com.extjs.gxt.ui.client.widget.Viewport;
 
 
 
 
import com.extjs.gxt.ui.client.Style.LayoutRegion; 
 
 
 
 
import com.extjs.gxt.ui.client.widget.LayoutContainer; 
 
 
 
 
import com.extjs.gxt.ui.client.widget.ContentPanel; 
 
 
 
 
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.BorderLayout;
 
 
 
 
import com.extjs.gxt.ui.client.widget.layout.FitLayout; 
 
 
 
 
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData; 
 
 
 
 
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.Style.Scroll;
 
 
 
 
 
public class TabBorders implements EntryPoint {
 
 
 
 
 
public void onModuleLoad() {

GXT.setDefaultTheme(Theme.BLUE, true);
GXT.hideLoadingPanel("loading");
TabBorders rf = new TabBorders();
}
 
 
 
 
public TabBorders() {

LayoutContainer lc = new LayoutContainer();
lc.setLayout(new BorderLayout());
 
 
 
 
ContentPanel north = new ContentPanel(); 

ContentPanel west = new ContentPanel(); 
ContentPanel center = new ContentPanel(); 
ContentPanel east = new ContentPanel(); 
ContentPanel south = new ContentPanel(); 
 
 
 
 
BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200); 

westData.setSplit(true); 
westData.setCollapsible(true); 
 
 
 
 
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER); 
 
 
 
BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200); 

eastData.setSplit(true); 
eastData.setCollapsible(true); 
 
 
 
 
BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100); 

southData.setSplit(true); 
southData.setCollapsible(true); 
southData.setFloatable(true); 
 
 
 
 
Grid logGrid = buildLogGrid();

south.add(logGrid);
 
 
 
 
lc.add(west, westData); 

lc.add(center, centerData); 
lc.add(east, eastData); 
lc.add(south, southData);
 
 
 
 
Viewport viewport = new Viewport();

viewport.setLayout(new FitLayout());
viewport.add(lc);
RootPanel.get().add(viewport);
}
 
 
 
 
private Grid buildLogGrid() {

ListStore<BaseModelData> store=new ListStore<BaseModelData>();
ArrayList<ColumnConfig> columns=new ArrayList<ColumnConfig>();
ColumnConfig cc=new ColumnConfig();
cc.setWidth(300);
cc.setId("col1");
cc.setHeader("This Is Column 1");
columns.add(cc);
cc=new ColumnConfig();
cc.setWidth(300);
cc.setId("col2");
cc.setHeader("This is column 2");
columns.add(cc);
ColumnModel cm=new ColumnModel(columns);
Grid grid=new Grid(store, cm);
grid.setTrackMouseOver(false);
grid.setHeight(200);
 
 
 
 
BaseModelData entry = new BaseModelData();
 
 
 
//populate with data.

for(int i=0;i<20;i++)
{
  entry = new BaseModelData();
  entry.set("col1","This is a date for row " + i);
  entry.set("col2","This is the really long text for row " + i);
  grid.getStore().add(entry); 
}
return grid;
}
 
 
 
 
}

[darrellmeyer]

You have not assigned the south content panel a layout. Try using a FitLayout.

[rons2112]

You sir are a genius. Worked like a charm.

[shruti_sharma]

I am facing a similar kind of issue. Here is my sample piece of code

ContentPanel north=new ContentPanel(new FitLayout());
            north.setHeaderVisible(false);
            north.add(searchPanel);
            north.add(gridAdapter.getGrid());
            north.setBottomComponent(pagingToolBar);
            BorderLayoutData northData=new BorderLayoutData(LayoutRegion.CENTER,345);
            northData.setSplit(true);

Here I am adding two widgets to my content panel which i guess is causing the problem as when I only add grid to the panel, I can see the scrollbar. But, in my case I need both these widgets in the same panel. This causes the scrollbar to disappear from the grid. Is there any solution to this?