PDA

View Full Version : Nested HBox and VBox Layouts



otterf
10 Nov 2010, 12:23 PM
I am attempting to use HBoxLayout and VBoxLayout to create a tree like structure. All was going well until I tried to next three layers deep. VBox->HBox->VBox. At this point the labels in the VBox are not displaying.

Here is the code:


Ext.onReady(function(){
new Ext.Window({
title: 'test',
layout:'vbox',
layoutConfig: {
align: 'stretch'
},
width: 500,
height: 200,
autoScroll: true,
padding: 10,
items: [
{layout:'hbox', items:[{html: 'icon'}, {html: 'Intake'}]},
{html: 'icon'},
{layout:'hbox', items:[{html: 'icon'}, {html: 'Review'}]},
{html: 'icon'},
{layout:'hbox', layoutConfig: {align: 'stetchmax'}, items:[
{html: 'icon'},
{html: 'subrecord'},
{
layout:'vbox',
layoutConfig: {align: 'stretchmax'},
items: [{id:'above', html: 'above'}, {id:'below', html: 'below'}]
}]
}
]
}).show();
});Here is the screen shot:

23258

Any suggestion on how to get the 'above' and 'below' panels to render?

Otter

Animal
10 Nov 2010, 12:39 PM
If your data is tree structured, use a TreePanel

otterf
10 Nov 2010, 12:56 PM
The simplified layout that demonstrates my problem makes it look like a tree. My ultimate layout is not so tree like. The example below is from a mockup laid out in pure html.
23260

Animal
10 Nov 2010, 1:14 PM
Looks like you should write custom Component.

Do not build a huge stack of Panels!