PDA

View Full Version : Gird Vertical Scrollbar not rendering correctly



sri2k1us
2 Oct 2010, 5:48 PM
Environment: GXT:2.2, GWT:2.03, java:6, MAC OS X with firefox 3.6.10

I have 2 grids side-by-side on a Horizontal Panel with fit layout. I load data into those grids using remote method calls after building the grid with empty store first. The grids are reordering grids (drag and drop within grids is enabled). After loading the store, i call reconfigure() and refresh(false) and layout on grid/grid view objects in that order. But the vertical scroll bar is not rendered fully (see grids with vertical scroll bar.png). The down scroll arrow is not visible. However, after I do a drag and drop, the vertical scroll bar becomes completely visible (down scroll arrow becomes visible). See grids with vertical scroll bar after reordering.png.

jay@moduscreate.com
6 Oct 2010, 4:27 PM
Moved to Gxt help. Please post in the proper forums in the future.

sven
7 Oct 2010, 1:33 AM
A Horizontelpanel wont have a FitLayout, because than the grid wont be next to each other. Please post a fully working testcase that implements EntryPoint and shows your problem.

sri2k1us
7 Oct 2010, 12:52 PM
Hi sven,
I have written a sample application and reproduced this problem and here is code...



package org.iplantc.test.client;

import java.util.ArrayList;

import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
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.AccordionLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class GridVscrollProblem implements EntryPoint
{

public void onModuleLoad()
{
ContentPanel panel = new ContentPanel();
panel.setHeading("AccordionLayout");
panel.setBodyBorder(false);
panel.setLayout(new AccordionLayout());
panel.add(buildGrids1());
panel.add(buildGrids2());
RootPanel.get().add(panel);
}

private ContentPanel buildGrids2()
{

HorizontalPanel panel = new HorizontalPanel();
Grid<Species> grid1 = new Grid<Species>(getStore(),getTraitGridColumnConfig());
grid1.getView().setEmptyText("select");
grid1.setAutoExpandColumn("name");
grid1.getView().setForceFit(true);


ContentPanel cp1 = new ContentPanel();
cp1.setHeaderVisible(false);
cp1.setLayout(new FitLayout());
cp1.setSize(205, 300);
cp1.add(grid1);

Grid<Species> grid2 = new Grid<Species>(getStore(),getTraitGridColumnConfig());
grid2.getView().setEmptyText("select");
grid2.setAutoExpandColumn("name");
grid2.getView().setForceFit(true);


ContentPanel cp2 = new ContentPanel();
cp2.setHeaderVisible(false);
cp2.setLayout(new FitLayout());
cp2.setSize(205, 300);
cp2.add(grid2);

panel.add(cp1);
panel.add(cp2);

ContentPanel outer = new ContentPanel();
outer.setHeading("Second Panel");
outer.setSize(500, 350);
outer.add(panel);
return outer;

}

private ListStore<Species> getStore()
{
ArrayList<Species> list = new ArrayList<Species>();
for (int i =0 ;i<50;i ++)
{
list.add(new Species(i+"", "test" + i));
}
ListStore<Species> s = new ListStore<Species>();
s.add(list);
return s;
}

private ContentPanel buildGrids1()
{
HorizontalPanel panel = new HorizontalPanel();
Grid<Species> grid1 = new Grid<Species>(getStore(),getTraitGridColumnConfig());
grid1.getView().setEmptyText("select");
grid1.setAutoExpandColumn("name");
grid1.getView().setForceFit(true);


ContentPanel cp1 = new ContentPanel();
cp1.setHeaderVisible(false);
cp1.setLayout(new FitLayout());
cp1.setSize(205, 300);
cp1.add(grid1);

Grid<Species> grid2 = new Grid<Species>(getStore(),getTraitGridColumnConfig());
grid2.getView().setEmptyText("select");
grid2.setAutoExpandColumn("name");
grid2.getView().setForceFit(true);


ContentPanel cp2 = new ContentPanel();
cp2.setHeaderVisible(false);
cp2.setLayout(new FitLayout());
cp2.setSize(205, 300);
cp2.add(grid2);

panel.add(cp1);
panel.add(cp2);
ContentPanel outer = new ContentPanel();
outer.setHeading("First Panel");
outer.setSize(500, 350);

outer.add(panel);
return outer;
}


private ColumnModel getTraitGridColumnConfig()
{
ArrayList<ColumnConfig> config1 = new ArrayList<ColumnConfig>();
ColumnConfig name1 = new ColumnConfig("name", "name", 200);
name1.setMenuDisabled(true);
config1.add(name1);
ColumnModel cm1 = new ColumnModel(config1);
return cm1;
}


private class Species extends BaseModelData
{
/**
*
*/
private static final long serialVersionUID = 1L;

/**
* Instantiate by id and name.
*
* @param id unique species id.
* @param name species name.
*/
public Species(String id, String name)
{
set("id",id);
set("name",name);
}

/**
* Get id of the object.
*
* @return id of the object.
*/
public String getId()
{
return get("id").toString();
}

/**
* Get the name of the object .
*
* @return name of the object.
*/
public String getName()
{
return get("name").toString();
}

}

}



The problem is much more clear now. These grids are inside a Accoridon layout (sorry that i forget to mention this info in my earlier post) and grids in the second panel are not sizing correctly. If you run the sample application that i have posted, the grids in the first panel is rendered perfectly fine. The grids in the second panel will not have the vertical scroll bar rendered fully. However, if you sort the grid, then the scroll bar rendered fully.

sven
7 Oct 2010, 1:53 PM
Try to refresh the gridview when the contentpanel gets expanded the first time.

sri2k1us
7 Oct 2010, 2:45 PM
Thanks sven...that worked!!!