Search code examples
extjsextjs3

extjs spacing issue in window with 2 items

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?

Solution

  • 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.