PDA

View Full Version : [FIXED]Viewport/Border Layout Render Issue



goldglovecb
17 Feb 2011, 3:07 PM
My apologies if this is a duplicate/known issue. Or perhaps my code is incorrect?

The following code renders like the first screenshot attached (tested in Firefox 3.6 and Chrome). When you collapse the west panel, it appears as expected (screenshot 2). When it is expanded, it works as expected (3rd screenshot). It's just the initial render that appears to be off.



Ext.onReady(function(){
Ext.create('Ext.Viewport',{
layout: 'border',
padding:8,
defaults:{
split:true,
border:true,
collapsible:true
},
items:[{
region:'west',
title:'Test',
width:'30%',
html:'test'
},{
region:'center',
layout:'fit',
collapsible:false,
html:'test'
}]
});
});


This appears to only be a problem when setting the width to a percentage. Using a number to define the width appears to work properly.

Animal
17 Feb 2011, 8:37 PM
Percentage width is not supported.

The border layout is essentially either one or two box layouts depending on how many regions you have.

If you use north, south, east and west, then it will be a vbox layout with a top box, a middle box which is an hbox, and then the bottom box.

In your case, it's just a simple Hbox.

The Border layout assigns flex: 1 to the center region.

So you should use flex: 0.5 to have your west region be 1/3 of the total width.

You might find it easier to use the box layouts directly. Border layout was only included for backwards compatibility with old apps which already use it.

goldglovecb
18 Feb 2011, 6:51 AM
Thanks for the insight. I was starting a rewrite of an older app... directly working with the box layouts seems like a better approach for my needs. Thanks for the suggestion!

mschwartz
18 Feb 2011, 8:05 AM
Percentage width is not supported.

Why not support it?

Animal
18 Feb 2011, 8:34 AM
Yes, I think I can do that.

A percentage will be converted to a flex value.

Of course after dragging any splitter, the user has overridden that, and now the border region size is controlled by the user.

mschwartz
18 Feb 2011, 9:48 AM
While you're at it, support width: 'auto', too.

The idea is for us coders to be able to express these things the way that seems natural to us.