extjs spacing issue in window with 2 items

Question

I have an extjs window object like this:

win = new Ext.Window({
layout:'fit', 
title: '<spring:message code="title.alertDetails" />',
autoDestroy: true,
autoScroll: true,
width:600,
height:400,
closable:false,
plain: true,
items: [detailGrid,msgDetailsPanel],
buttons: [{
text: '<spring:message code="label.button.close" />',
handler: function(){
win.hide(this);
}
}]
});

There are 2 items: detailGrid(GridPanel) and msgDetailsPanel(Ext.ux.ManagedIFrame.Panel).

Now when the window renders, the detailGrid takes up a lot of vertical space even if the grid has only 1 item and i need to scroll down to see the msgDetailsPanel. How can i make these 2 items auto adjust the size based on their contents?

Answer 1

Simply set the autoHeight : true for both the grid and the ManagerIFramePanel and remove the height property of both of them. Then the grid and the panel will take up only as much space as required by their child items or grid rows.

Answer 2

i think best way is:

1. use border layout for win; center region for grid and south for panel.
2. set panel height = win.height - grid.getStore().getCount() * 25 - 30;
3. set split = true for panel

Answer 3

The reason is actually because you have layout: 'fit' set on the window itself, which is supposed to support just a single item spanning the whole height and width of the panel. Use layout: 'auto', or maybe 'vbox' / 'hbox'.