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

[don_bm]

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]

Confirmed here. Flex just doesn't seem to work in 0.94

[orangechicken]

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]

Please test it against 0.95.

[don_bm]

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]

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]

Thanks for the bug report.

[rdougan]

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]

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]

Sorry, I only tested on .93 and the latest version (unreleased) of touch. .96 will be out on Tuesday.