That override does not fix the issue I am having. I have broken it down into a simplified example:
Code:
<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?
vbox layout containing items with unknown height
Posting Permissions
