View Full Version : 3.3.3 Can't get GridPanel to use 100% height of table cell

22 May 2011, 7:08 PM
I've dug through the forums and have found some discussion on this mostly revolving around misunderstandings about layouts, but I can't seem to nail this down.

The following block of code creates a window with a border layout and a GridPanel in the only defined region, center. The GridPanel grows to the full size of the window, which is the behavior I am trying to achieve.

var test_ds = new Ext.data.SimpleStore({
fields: [ 'str' ],
data: [ ['str1'], ['str2'] ]

var test_grid = new Ext.grid.GridPanel({
id: 'test_grid',
mode: 'local',
autoScroll: true,
layout: 'fit',
region: 'center',
frame: true,
store: test_ds,
colModel: new Ext.grid.ColumnModel({
columns: [
dataIndex: 'str',
id: 'str'
autoExpandColumn: 'str'

var mywindow = new Ext.Window({
height: 200,
width: 200,
layout: 'border',
items: [
renderTo: Ext.getBody()

Ultimately what I am trying to achieve is this:

I'm drawing a Window that uses a table layout to draw a table with 4 columns and 5 rows. One of the rows has for its cell contents some text (column 1), then 3 GridPanels (columns 2,3,4). No matter what I have tried, I can't get each of the GridPanels to fill their cells entirely. What happens is the biggest grid panel fills its cell entirely, then the other smaller GridPanels are drawn just big enough to display all the data they contain, and are vertically aligned in the middle of their cells, rather than being anchored at the top and growing down to fill their cells, like in the example code above.

Any assistance is greatly appreciated.

Andrew Davidoff

24 May 2011, 10:37 AM
Just bumping this once before I let it fall off.

29 May 2011, 6:19 PM
Just to wrap this up: I got a response from Sencha support about this:

"The table layout isn't a sizing layout, meaning it doesn't modify the size of any child items. As such, you would need to manually specify the dimensions on the grid to have it size to the width/height of the cell. "

As a work around for this I am just specifying a height on the grids which keeps them all the same height, although it doesn't allow for them to shrink below that fixed height.