PDA

View Full Version : gridPanel autoHeight



doppelganger
7 Sep 2011, 7:30 AM
Hello,

is there any way to achieve in ExtJs4 the same behavior we had in ExtJs3 with autoHeight: true?

Specifically, I have one Grid in Panel with auto layout. (I don't want grid to be stretched, so layout:fit is no go.)

When store is loaded, one can't see the records, because the grid's height set to minimum.

Workaround is to call doLayout on store load:


grid.store.on('load', function(ds) {
grid.doLayout();
});


but this is not working so good anyway. Is there any good solution from the book? Any help will be highly appreciated.

jay@moduscreate.com
7 Sep 2011, 8:35 AM
Setting a layout on the grid panel won't buy you anything. What you might be able to do is get the height of the scroller element and then add that with the height of the title bar + ?tbar + ?bbar and set the panel's height accordingly. Calling doLayout won't buy you anything.

doppelganger
7 Sep 2011, 11:44 PM
I'm not setting layout on the grid, I'm setting it on a parent panel. Just a few minutes, I'll produce the simple test code...

doppelganger
8 Sep 2011, 12:15 AM
Here is the code, simplified:



Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [ { xtype: 'panel', items: [ { xtype: 'mygrid' } ] } ]
});


'mygrid' doesn't have any layout or height settings. I want it grow and shrink according to data. On the next step I'd like to add another grid(s) to the same panel with the same functionality. Is it possible?

skirtle
8 Sep 2011, 7:45 AM
As Jay suggests, you'll need to do this manually. It shouldn't be too difficult. If you experiment a bit in Firebug I think you'll see that the grid contains a DIV that is the full height of all the rows. Add that on to any other heights (like the header) and then set the overall component height to match.

doppelganger
8 Sep 2011, 10:55 PM
Thanks. But the interesting thing is doLayout (or doComponentLayout, to be precise) setting grid's height according to its content, but only once, on the first Store load. So I still believe there is a more elegant way to do it.

doppelganger
8 Sep 2011, 11:03 PM
> get the height of the scroller element

Sorry, on which stage? On Store's load there is no grid's body yet.

I can see that single doLayout call on grid's parent panel from the Store's load do the job, but only on the first page load. So there is a functionality, I just can't get it work.

Anyway, this is all the part of a bigger question -- how do we solve layout with several child items which have variable heights? For example, a window with several items inside, if we want it to grow without the scroll when child items grow -- how we do it?