PDA

View Full Version : Controls without height don't show



wilcovdberg
12 Jan 2011, 12:42 AM
Hi all,

We're currently trying to get a basic layout working in Ext and we are having some problems. If we do not set the height for the vbox layouts, the controls are not visible on the page. I would expect the vboxes to scale according to its child controls. How do we get the controls visible without setting the height?



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
</head>
<body></body>
</html>


Ext.onReady(function() {

var dispayField1 = {
xtype:'displayfield',
value:'test1',
height:25,
flex:1
};

var vboxLeft = new Ext.Container({
layout: 'vbox',
items: [dispayField1, dispayField1],
height:200 //don't want this
});

var vboxRight = new Ext.Container({
layout: 'vbox',
items: [dispayField1, dispayField1, dispayField1],
height:200 //don't want this
});

var hbox = new Ext.Container({
layout: 'hbox',
items: [vboxLeft, vboxRight]
});

hbox.render(Ext.getBody());
});

wilcovdberg
13 Jan 2011, 7:35 AM
Anyone?

darthwes
13 Jan 2011, 7:58 AM
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
defaults: {
flex: 1
},
items: [vboxLeft, vboxRight]