Sencha Touch 1.1 - Two column layout in hbox creates a <div> of height 0px causing subsequent panels to overlap its content

Question

I am using Sencha Touch to create a newletter layout. I start with a vbox panel (P1). Within this panel is a hbox panel (P1Content) that has "left column", spacer and "right column" panels. Both columns are vbox and contain panels themselves with content. I then try to add another panel underneath P1Content (P1Bottom). Here's the problem. P1Bottom overlaps with P1Content's content. I used Web Inspector and discovered that Sencha Touch set the height of Panel A's to be 0px. If I set the height of P1Content to a certain value (e.g. 1000px), it's fine. However, I can't depend on a fixed value: The content of the panels is dependent on the user's selectio. I want Sencha Touch to calculate the height like it does with its other elements.

What do I do?

    var P1LeftColumn = new Ext.Panel({
        layout: { type: 'vbox', align: 'stretch' },
        cls: 'columnleft',
        flex: 25,
        items: [A,B]
    });

    var P1RightColumn = new Ext.Panel({
        layout: { type: 'vbox', align: 'stretch' },
        cls: 'columnright',
        flex: 25,
        items: [
            D,
            { height: 20 },
            E,
            { height: 20 },
            F,
            { height: 20 },
            G
        ]
    });

    var P1Content = new Ext.Panel({
        layout: { type: 'hbox', align: 'stretch' },
        // height: '1000px', Can't do this because the height is dynamic depending on the user's selection
        items: [
                    P1LeftColumn,
                    { flex: 1 },
                    P1RightColumn
                ]
    });

    var P1Bottom = new Ext.Panel({
        html: 'This should appear below the columns but overlaps them instead.'
    });

    var P1 = new Ext.Panel({
        layout: { type: 'vbox', align: 'stretch' },
        items: [P1Banner, P1Header, P1Content, P1Bottom]
    });

fuzzyLikeSheep fuzzyLikeSheep · Accepted Answer · 2012-03-21T14:54:29

From a glance it seems you need to put flex in the panels config option

Layout:{ type: 'hbox', align: 'stretch' },
flex:1,
items:[]

Sencha Touch 1.1 - Two column layout in hbox creates a <div> of height 0px causing subsequent panels to overlap its content

1 Answers