PDA

View Full Version : vbox layout containing items with unknown height



willryanuk
30 Dec 2009, 8:23 AM
Has someone written a layout whereby I can have a number of items of unknown height which take up the space they require, followed by an item that takes up the remaining height?

Moreover, is it possible for a number of items to have unknown height, some items to have a fixed known height and another set of items to take up the remaining height using the flex property (or something similar)?

Animal
30 Dec 2009, 8:32 AM
You are describing a vbox layout with this fix http://www.extjs.com/forum/showthread.php?p=422978#post422978

willryanuk
5 Jan 2010, 5:16 AM
That override does not fix the issue I am having. I have broken it down into a simplified example:



<html>

<head>
<title>Test VBox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../js-lib/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../js-lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js-lib/ext/ext-all-debug.js"></script>


<script type="text/javascript">
Ext.onReady(function(){





var searchBox = new Ext.form.TextField({
allowBlank: true,
flex: 1,
emptyText: 'e.g. Regent Street, London'
});

var searchButton = new Ext.Button({
text: 'Search',
width: 60
});


var searchBoxAndButton = new Ext.Container({
layout: 'hbox',
//height:32, // THIS HEIGHT IS REQUIRED, BUT I WANT IT TO USE THE HEIGHT IT REQUIRES (I.E. I DO NOT WANT TO SPECIFY A HEIGHT)
layoutConfig: {
align : 'stretch',
pack: 'start',
padding: '5'
},
items: [searchBox, searchButton]
});

var searchStatusPanel = new Ext.Container({
contentEl: 'searchStatus'
});

var inputBoxButtonAndStatus = new Ext.Container({
layout: 'vbox',
height:70, // THIS HEIGHT IS REQUIRED, BUT I WANT IT TO USE THE HEIGHT IT REQUIRES (I.E. I DO NOT WANT TO SPECIFY A HEIGHT)
layoutConfig: {
align : 'stretch',
pack: 'start'
},
items: [searchBoxAndButton, searchStatusPanel]
});


var resultsStatusPanel = new Ext.Container({
// this does NOT require a height
contentEl: 'resultsStatus'
});

var resultsAccordian = new Ext.Panel({
layout: 'accordion',
flex: 1,
items: [
{title: 'AAA', layout: 'fit'},
{title: 'BBB', layout: 'fit'},
{title: 'CCC', layout: 'fit'}
]
});


var searchResultsPanel = new Ext.Container({
layout:'vbox',
flex:1,
layoutConfig: {
align : 'stretch',
pack: 'start'
},
items: [resultsStatusPanel, resultsAccordian]
});


var centerPanel = new Ext.Panel({
title: 'Center Panel',
layout:'vbox',
layoutConfig: {
align : 'stretch',
pack: 'start'
},
items: [inputBoxButtonAndStatus, searchResultsPanel]
});





var viewport = new Ext.Viewport({
layout: 'fit',
items: [ centerPanel ]
});


});
</script>

</head>

<body>

<div id="searchStatus" class="x-hide-display">
Search status panel.
</div>

<div id="resultsStatus" class="x-hide-display">
Results status Panel.
</div>



</body>

</html>


As you can see from the attached screenshots, the inputBoxButtonAndStatus and its child items must have a height specified, otherwise they are given zero. The override has no effect. I am using Ext 3.1.0. What am I doing wrong?