View Full Version : Sizing a GridPanel based on the number of rows returned from the server (store)

9 Sep 2010, 9:59 AM
I'm trying to re-size my GridPanel to a height relative to the number of rows returned from the server. In other words, say my JsonStore object returned contains a total count (.getTotalCount()) of 10 records. I want the GridPanel that displays my grid to adjust its height to only display the grid data and no white space.

I was trying to do something like the following where I multiply the total count by some fixed number to try to estimate the number of pixels. However, only the grid data itself resizes, but not the panel that encapsulates it. It seems like there has to be an easier way?

Thanks in advance.

var mygrid = new Ext.grid.GridPanel({
//...some initial attributes

var gridstore = new Ext.data.JsonStore({
url: 'ajax/DataServlet',
root: 'data',
fields: [ //...some data fields

gridstore.on('load', function(store) {
var count = store.getTotalCount();
mygrid.setHeight(count * 20); //resize event is fired after setHeight() is called

10 Sep 2010, 2:10 AM
1. You could configure your grid with autoHeight:true (but that also removes the horizontal scrollbar).
2. Resize the container that actually determines the height of the grid; which might not be the grid itself. Next, you need to call doLayout on the container of that component.