PDA

View Full Version : Collapsible panel in border layout with vbox stretch/flex



fabio.policeno
17 Oct 2013, 9:05 AM
Hello, when running the code below, the panel 2 is not expanding, any idea layout for me to perform this behavior? Thank's!



Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'center',
defaults: {collapsible: true},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'Panel 1',
flex: 1
},{
title: 'Panel 2',
collapsed: true,
flex: 1
},{
title: 'Panel 3',
height: 169
}]
}]
});

Farish
17 Oct 2013, 9:31 AM
when the center region is first rendered, panel3 has a fixed height and panel1 takes the remaining available space (since panel2 is collapsed). if you collapse panel1 or panel2, then you can expand and collapse panel2 because the heights are recalculated based on the available space (flex).

if panel2 doesnt need to be collapsed on load, you can set collapsed: false.

fabio.policeno
17 Oct 2013, 9:35 AM
Ok, but how do i make it so possible to expand/collapsar all items and set the item 3 with fixed height?

Farish
17 Oct 2013, 9:39 AM
if panel2 doesnt need to be collapsed on load, you can set collapsed: false. If the panel2 is expanded on load, then the height will be correct and you can expand or collapse it.

fabio.policeno
17 Oct 2013, 9:53 AM
Panel 1 should be expanded, panel 2 should be collected and panel 3 should be expanded (as it is in the code), but the execution is I need all are collapsible. You have a sample?

fabio.policeno
17 Oct 2013, 11:39 AM
start with 2 panel expanded, the problem does not occur, it will be a bug?