Results 1 to 4 of 4

Thread: Grid scrolling in a border layout

  1. #1

    Exclamation Grid scrolling in a border layout

    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.

    import com.extjs.gxt.ui.client.GXT;
    import com.extjs.gxt.ui.client.util.Theme;
    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.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);
    BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
    BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200); eastData.setSplit(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; }
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    May 2007
    Washington, DC


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

  3. #3


    You sir are a genius. Worked like a charm.

  4. #4


    I am facing a similar kind of issue. Here is my sample piece of code
    ContentPanel north=new ContentPanel(new FitLayout());
                BorderLayoutData northData=new BorderLayoutData(LayoutRegion.CENTER,345);
    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts