PDA

View Full Version : AutoHeight Container



harman
16 May 2012, 3:23 AM
Hi,

How to make a container that automatically adjusts its height according to varying height of its children items?

Thanks

friend
16 May 2012, 3:28 AM
If no height is applied to a parent container and the parent uses an 'auto' or 'fit' layout, it will generally auto-size it's height to match the combined height of all child items.

Example:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Autoheight Container Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'No height specified for Window',
width: 400,
items: [{
xtype: 'panel',
height: 100,
title: 'Child Panel 1: Height 100'
},{
xtype: 'panel',
height: 60,
title: 'Child Panel2 : Height 60'
},{
xtype: 'panel',
height: 200,
title: 'Child Panel3 : Height 200'
}],
buttons: [{
text: 'Close',
handler: function(button, event) {
button.up('window').close();
}
}]
}).show();
});
</script>
</head>
<body>
</body>
</html>

harman
16 May 2012, 4:16 AM
Thanks for such a quick reply.
Its solution to exactly what i wanted.
:)

gkohen
11 Apr 2014, 3:45 AM
Wouldn't 'auto' fit the parent to it's children where 'fit' will do exactly the opposite and fit children to their parent?