[1.1.4, 1.1.3]Grid in ContentPanel shows large blank space at bottom of grid

[sbarkdull]

I have a UI that consists of a Viewport, with a borderLayout(), using just the North and Center areas. In those 2 areas I place a grid. The grids display a 50-100 pixel tall blank area at the base of each grid. I can't figure out what is causing this, and I would like to make them (the blank space) go away. (See attached image.)
Code is below:

package snb.client;

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

import snb.client.bean.Stock;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
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.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.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.ui.RootPanel;

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

/**
* This is the entry point method.
*/
public void onModuleLoad() {

Viewport vp = new Viewport();
BorderLayout bLayout = new BorderLayout();
vp.setLayout(bLayout);

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH );
northData.setSplit(true);
northData.setMargins( new Margins( 0) );

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER );
centerData.setSplit(true);
centerData.setMargins( new Margins( 0) );


ContentPanel cpNorth = new ContentPanel(new FitLayout());
ContentPanel cpCenter = new ContentPanel(new FitLayout());

cpNorth.setFrame( true );
cpNorth.setFooter( false );
cpCenter.setFrame( true );
cpCenter.setFooter( false );

final Grid<Stock> grid1 = makeGrid();
final Grid<Stock> grid2 = makeGrid();
grid2.setHideHeaders( false );

cpNorth.add(grid1);
cpCenter.add(grid2);

vp.add( cpNorth, northData );
vp.add( cpCenter, centerData );

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

private Grid<Stock> makeGrid() {

ListStore<Stock> store = new ListStore<Stock>();

List<Stock> l = new ArrayList<Stock>();
for ( int ii=0; ii<200; ++ii ) {
Stock m = new Stock();
m.set( "name", ((String)m.get( "name" )) + ii );
l.add( m );
}
store.add(l);

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(100);
configs.add(column);

column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);

column = new ColumnConfig();
column.setId("last");
column.setHeader("Last");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(75);
configs.add(column);

column = new ColumnConfig("change", "Change", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
configs.add(column);

column = new ColumnConfig("date", "Last Updated", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
configs.add(column);

ColumnModel cm = new ColumnModel(configs);

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setLoadMask( true );
grid.getView().setAutoFill( true );
grid.setBorders(true);
grid.setStripeRows( true );
grid.setAutoExpandMax( 400 );
return grid;
}
}


/*
* Ext GWT - Ext for GWT
* Copyright(c) 2007, 2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
package snb.client.bean;

import java.util.Date;

import com.extjs.gxt.ui.client.data.BaseModel;
import com.google.gwt.i18n.client.DateTimeFormat;

public class Stock extends BaseModel {

private static DateTimeFormat format = DateTimeFormat.getFormat("M/d h:mma");

public Stock() {
set("name", "Citrix ");
set("symbol", "CTX");
set("open", 3);
set("last", 5);
set("date", new Date());
set("change", 2);
}

public Stock(String name, String symbol, double open, double last) {
set("name", name);
set("symbol", symbol);
set("open", open);
set("last", last);
set("date", new Date());
set("change", last - open);
}

public Stock(String name, double open, double change, double pctChange, String date, String industry) {
set("name", name);
set("open", open);
set("change", change);
set("percentChange", pctChange);
set("date", format.parse(date));
set("industry", industry);
}

public String getIndustry() {
return get("industry");
}

public void setIndustry(String industry) {
set("industry", industry);
}

public Date getLastTrans() {
return (Date) get("date");
}

public String getName() {
return (String) get("name");
}

public String getSymbol() {
return (String) get("symbol");
}

public double getOpen() {
Double open = (Double) get("open");
return open.doubleValue();
}

public double getLast() {
Double open = (Double) get("last");
return open.doubleValue();
}

public double getChange() {
return getLast() - getOpen();
}

public double getPercentChange() {
return getChange() / getOpen();
}

public String toString() {
return getName();
}

}

[darrellmeyer]

The code you posted works as expected for me. I tested in Safari windows and mac. The screenshot you posted is not from the code you posted. Are you having issue with the test code?

[sbarkdull]

Oops, I am posting the correct image of the app. See the blank area under the text "How do I get rid of this blank area under the text".

[yih579]

Oops, I am posting the correct image of the app. See the blank area under the text "How do I get rid of this blank area under the text".

Hi, did you ever find a fix for this, I'm seeing the same problem?

Thanks.

[poojagarg89]

dont specify the size of GridPanel
and use

layout: 'fit',
viewConfig: {
            forceFit: true
        },

in GridPanel inspite of giving width and height...!
u'll get rid of that empty space