View Full Version : [IE] scrolls reduce grid data area

5 Jan 2011, 3:05 AM
reproduced with :
- GXT version : 2.2.1
- GWT version : 2.1.1
- Browser : IE8.0 vs FF3.6.11
but probably non browser version dependant

I've got grids in portlets. grid widths are greater than portlet widths.

With FF, grid height is increased to draw a horizontal scrollbar which is what i expect.

With IE, a vertical scrollbar appears relating to the horizontal scrollbar drawn over the data.
finally, when i scroll to the extreme right, vertical scrollbar width switch data to the wrong column.

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

import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
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.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.RootPanel;

public class Test implements EntryPoint {

public void onModuleLoad () {
Viewport vp = new Viewport ();
Portal portal = new Portal (1);
portal.setColumnWidth(0, 300);

ListStore<ModelData> store = new ListStore<ModelData> ();
store.add (createGridData ());
Grid<ModelData> grid = new Grid<ModelData> (store, new ColumnModel (createColumnConfigs ()));
grid.setBorders (true);
grid.setAutoHeight (true);

Portlet portlet = new Portlet ();
portlet.setHeading ("portlet heading");
portlet.setAutoHeight (true);
portlet.add (grid);
portal.add (portlet, 0);

vp.add (portal);
RootPanel.get ().add (vp);

private List<ColumnConfig> createColumnConfigs () {
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
for (int i = 0; i < COLUMNS_COUNT; i ++) {
ColumnConfig column = new ColumnConfig();
String id = "column"+i;
return configs;

private List<ModelData> createGridData () {
List<ModelData> data = new ArrayList<ModelData> ();
for (int j = 0; j < 5; j ++) {
BaseModelData md = new BaseModelData ();
data.add (md);
for (int i = 0; i < COLUMNS_COUNT; i ++) {
String id = "column"+i;
md.set (id, Random.nextInt (100));
return data;

private static final int COLUMNS_COUNT = 4;

5 Jan 2011, 12:27 PM
You should not use autoheight. You should use the GXT layoutsystem to size your widgets,

6 Jan 2011, 8:24 AM
We already try to change the SystemLayout without autoHeight, but failed to find a solution.
could you help us with some examples?
Thank you

6 Jan 2011, 3:52 PM
You should remove autoHeight from Portlet and the Grid. Than you should give the Porlet a FitLayout and also set a height there. If you want to dynamically set the height, take a look at this example: http://www.sencha.com/examples/explorer.html#autoheightgrid

7 Jan 2011, 2:38 AM

We tried using this code from autoheight grid example :

protected void doAutoHeight() {
if (grid.isViewReady()) {
grid.getView().getScroller().setStyleAttribute("overflowY", "hidden");
cp.setHeight((grid.getView().getBody().isScrollableX() ? 19 : 0) + grid.el().getFrameWidth("tb")
+ grid.getView().getHeader().getHeight() + cp.getFrameHeight()
+ grid.getView().getBody().firstChild().getHeight());
}In our real use case, container tree is more complex and the presenter who manage the grid doesn't have reference to the container.
We can't do this kind of code : cp.getFrameHeight() from the example.

We try without this and it seems to work. We replace the FitLayout on the Portlet by a Flow one and set the height directly on the grid instead of do this on the container.

It remains one problem : this code doesn't manage aggregation rows and GridView doesn't provide access to the ColumnFooter as it does for the ColumnHeader. How can we get the Footer height ?

Thanks for any help.

7 Jan 2011, 2:45 AM
footer is protecetd. You can subclass GridView and add your own public access method.

7 Jan 2011, 2:45 AM
In our real use case, container tree is more complex and the presenter who manage the grid doesn't have reference to the container.
We can't do this kind of code : cp.getFrameHeight() from the example.

You can use getParent to get the parent widget.

7 Jan 2011, 5:08 AM
Thanks, i'll try all of these.

7 Jan 2011, 5:41 AM
It seems to be all right in our test code. I'll integrate it in our application code.