PDA

View Full Version : [OPEN-325] Layout Issue: 2 Sections in VBox, Make One Fill Available Space



don_bm
14 Sep 2010, 10:35 AM
Sencha Touch version tested:


0.94

Platform tested against:


iOS 4

Description:


I have a layout w/ the top most Panel using an hbox w/ left and main
items. The left section uses a VBox with 2 items: content and a video. I
want the content section to take the remaining space and I can't seem
to get it to work w/ 0.94. It worked fine on 0.93.

Test Case:



var content = new Ext.Panel({
layout: {
type: 'fit',
align: 'stretch',
flex: 2
},
style: 'border: 5px solid #666666',
html: 'Content'
});
var video = new Ext.Panel({
layout: 'fit',
style: 'border: 5px solid #666666',
width: 320,
height: 240,
html: 'Video'
});
var left = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch',
pack: 'end'
},
width: 320,
items: [content, video]
});
var center = new Ext.Panel({
layout: 'fit',
flex: 2,
style: 'border: 5px solid #666666',
html: 'Center'
});

Ext.setup({
onReady: function() {
var homeScreen = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},
fullscreen: true,
items: [left, center]
});
}
});

orangechicken
14 Sep 2010, 4:42 PM
Confirmed here. Flex just doesn't seem to work in 0.94

orangechicken
14 Sep 2010, 5:00 PM
I think I might have found a possible reason. It seems that in setFlexedItems and onLayout on the box layout it looks if *direction* == 'horizontal'. But, for some reason, VBox sets *orientation* to 'vertical' and not *direction*... Strange that there are two different variables for the same thing. Maybe it was a global search and replace miss?

Changing direction to orientation fixes flex behavior in VBoxes.

BrendanC
15 Sep 2010, 4:32 PM
Please test it against 0.95.

don_bm
17 Sep 2010, 12:43 PM
Please test it against 0.95.

I just tested w/ 0.95 and I get the same results. The 'content' section isn't taking the remaining space.

don_bm
22 Sep 2010, 7:10 AM
I just tested w/ 0.95 and I get the same results. The 'content' section isn't taking the remaining space.

Any word on this? The status is still INFOREQ and this bug is holding up our development. We need to use NestedList and I know the API has changed after 0.93.

BrendanC
22 Sep 2010, 10:31 AM
Thanks for the bug report.

rdougan
23 Sep 2010, 2:15 PM
Hi don_bm,

I have looked at your code and changed it so it now works in .93 and the latest version of Touch:


var content = new Ext.Panel({
flex:1,
style: 'border: 5px solid #666666',
html: 'Content'
});
var video = new Ext.Panel({
style: 'border: 5px solid #666666',
width: 320,
height: 240,
html: 'Video'
});
var left = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch',
pack: 'end'
},
width: 320,
items: [content, video]
});
var center = new Ext.Panel({
flex: 2,
style: 'border: 5px solid #666666',
html: 'Center'
});

Ext.setup({
onReady: function() {
var homeScreen = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch'
// pack: 'start'
},
fullscreen: true,
items: [left, center]
});
}
});

There is no need for layout: 'fit' in all your panels, they will automatically stretch to fit an area. On the panel you wanted to flex (var content), I simply added flex:1, which should be what you are looking for.

don_bm
24 Sep 2010, 9:17 AM
Hi don_bm,

I have looked at your code and changed it so it now works in .93 and the latest version of Touch:


Hi rdougan,

I've tried your code but it doesn't work for 0.95. It does work for 0.93 (and I do realize that the original code I posted didn't even work for 0.93, the flex property should be outside the layout object). Can you verify this and reopen this bug?

EDIT: By "latest version of Touch" do you mean an unreleased version? I assumed you meant 0.95

rdougan
24 Sep 2010, 9:25 AM
Sorry, I only tested on .93 and the latest version (unreleased) of touch. .96 will be out on Tuesday.

don_bm
18 Oct 2010, 11:17 AM
Please reopen, this is broken again in 0.97...



var content = new Ext.Panel({
flex:1,
style: 'border: 5px solid #666666',
html: 'Content'
});
var video = new Ext.Panel({
style: 'border: 5px solid #666666',
width: 320,
height: 240,
html: 'Video'
});
var left = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch',
pack: 'end'
},
width: 320,
items: [content, video]
});
var center = new Ext.Panel({
flex: 2,
style: 'border: 5px solid #666666',
html: 'Center'
});

Ext.setup({
onReady: function() {
var homeScreen = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch'
// pack: 'start'
},
fullscreen: true,
items: [left, center]
});
}
});