PDA

View Full Version : [3.2]VBox layout behaves incorrectly



Stju
6 Apr 2010, 2:00 PM
Expected result:
Three panels arranged vertically and taking up whole space evenly!

Observed result:
BLANK SCREEN, no errors..



Ext.onReady(function(){
var first = new Ext.Panel({
title:'first',
collapsible:true,
flex:1,
html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
});

var second = new Ext.Panel({
title:'second',
collapsible:true,
flex:1,
html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
});

var third = new Ext.Panel({
title:'third',
collapsible:true,
flex:1,
html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
});

var centerItem= new Ext.Container({
region:'center',
layout: {
type:'vbox',
align:'stretch'
},
items:[first, second,third]
});

var view = new Ext.Viewport({
items:[centerItem]
});
});

Animal
6 Apr 2010, 2:02 PM
STOP now.

This ALSO is your bug.

Animal
6 Apr 2010, 2:04 PM
How are you HOPING that the Viewport sizes its sole child item?

Stju
6 Apr 2010, 2:14 PM
Thank's ANIMAL, don't fight !


var view = new Ext.Viewport({
layout:'border',
items:[centerItem]
});

Red code was missing.. too much work.. Looks like I really need some sleep..~o)

Stju
6 Apr 2010, 2:36 PM
Okay, but when second panel is initially collpased, thed rendering is wrong..


var second = new Ext.Panel({
title:'second',
collapsible:true,
collapsed:true,
flex:1,
html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
});


Second observation:
If You collapse any panel and then resize viewport - collapsed panels are excluded from laying up - see pictures.

For me it looks like collapsed panels are excluded from layout.. :-?

choykawairicky
6 Apr 2010, 6:24 PM
I'm not quite sure, but I think your panel will be rendered first before putting it to your container, so maybe you need to force layout to redraw yourself.


var second = new Ext.Panel({
title:'second',
collapsible:true,
collapsed:true,
flex:1,
html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
});


or maybe you can write in this way,


var second = {
xtype: 'panel',
title:'second',
collapsible:true,
collapsed:true,
flex:1,
html:'Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry.<br>'
};

Animal
6 Apr 2010, 9:37 PM
It's not valid to expand/collapse in a box layout.

What's the behaviour supposed to be?

Use a border layout.

Stju
6 Apr 2010, 9:43 PM
Supposed behavior is to achieve accordion style layout with multiple open panels, because original accordion allows to open only one at once .. :s , so that's why looking for workarounds..

Animal
6 Apr 2010, 11:26 PM
I use anchor layout for that.

You have to anchor: '-' + Ext.getScrollBarWidth() for that to allow you to open many at once.