PDA

View Full Version : Anchor layout + fixed height child



Wout92
10 May 2012, 6:21 AM
Hello,

I have 2 panels underneath of each other. What I am trying to achieve is a layout where, panel 1 is set to a fixed height. panel 2 has to stretch to the remaining space. Tried many setups but none really did what I was looking for.

This is an example of what i am trying to achieve:


|------------|
| always |
| 30px height|
|------------|
| |
| should |
| stretch to |
| remaining |
| space |
| |
|------------|


This is the code that works, but not with a fixed height:


{
layout: 'anchor',
items: [{
title: 'Select date range',
style: 'padding: 5px',
anchor: '100% 10%',
items: {
xtype: 'cm-doc-statistics-daterange',
controller: locationController
}
},{
title: 'Location on map',
style: 'padding: 5px',
anchor: '100% 90%',
layout: 'fit',
items: {
xtype: 'cm-doc-statistics-panels-demography-locationMap',
controller: locationController
}
}]
}



Thanks in advance!

Wout92
10 May 2012, 6:37 AM
Already fixed it:



{
layout:
{ type: 'vbox', pack: 'start', align: 'stretch' },
items: [{
title: 'Select date range',
style: 'padding: 5px',
flex: 0,
items: {
xtype: 'cm-doc-statistics-daterange',
controller: locationController
}
},{
title: 'Location on map',
style: 'padding: 5px',
anchor: '100% 90%',
flex: 1,
items: {
xtype: 'cm-doc-statistics-panels-demography-locationMap',
controller: locationController
}
}]
}


Tried this before I posted this question. Probably overlooked something..