PDA

View Full Version : Nested Layouts Problem



Dumas
16 Jul 2010, 3:25 PM
Hi!

I want to have an panel with two items:
- the one on the left will be an navigation list view
- the one on the right will be an card layout and display the selected content (depending on the right on)
Elements of the content part are normally forms

So the navigation should have as much horizontal space as it needs and the right one should use all still available space.

The UI should look like this:


______________________________________________
| | |
| navi | active item of the card panel |
| | |
|___________|________________________________|

where the window is:
______________________________________________
| |
| |
| |
|____________________________________________|

navigation fit layout:
_____________
| |
| navi |
| |
|___________|
card panel:
__________________________________
| |
| |
| |
|________________________________|

card panel active item:
__________________________________
| |
| active item of the card panel |
| |
|________________________________|
actual result from the code below:
______________________________________________------------------
| | | overflow:hidden |
| navi | active item of the card panel | content of the |
| | | active item :-/ |
|___________|________________________________|------------------



var win = new Ext.Window({
width: 500,
height: 300,
layout: 'table',
layoutConfig: {
tableAttrs: {
style: {
width: '100%',
border: '1px solid black;'
}
},
columns: 2
},
items: [{
html: 'navigation panel<br/> on the left',
border: true
}, {
title: 'content panel with card layout',
header: true,
layout: 'card',
activeItem: 0,
border: true,
items: [{
xtype: 'panel',
title: 'anchor layout',
header: true,
layout: 'anchor',
items: [{
html: 'anchor layout first el',
}, {
html: 'anchor layout second el',
}]
}]
}]
});
win.show();
As well, how can I get the vertical space of the content card panel to 100%?

thx
Roland

Animal
16 Jul 2010, 10:08 PM
This situation is what layout: 'hbox' was designed for.

Dumas
17 Jul 2010, 4:52 AM
lol, a guy in the irc channel just told me that hbox can't do that and I should switch to table layout^^

How can I get the second item on the hbox layout to consume the whole still available space and not just a part of it?

thx
Roland

Animal
17 Jul 2010, 5:49 AM
flex

The docs tell you how to use it.

Dumas
18 Jul 2010, 8:35 AM
Ah, I saw the flex config, but I didn't know that i can also define flex only for some of the items, thx. Works like a charm! :)