Sencha touch Sencha Touch 1.1-hbox中的两列布局创建一个<；部门>；高度为0px，导致后续面板与其内容重叠

我正在使用Sencha Touch创建一个newletter布局。我从一个vbox面板（P1）开始。在该面板内有一个hbox面板（P1Content），该面板具有“左栏”、间隔栏和“右栏”面板。这两列都是vbox，并且包含带有内容的面板本身。然后我尝试在P1Content（P1Bottom）下面添加另一个面板。问题出在这里。P1Bottom与P1Content的内容重叠。我使用Web Inspector发现Sencha Touch将面板A的高度设置为0px。如果我将P1Content的高度设置为某个值（例如，1000px），就可以了。但是，我不能依赖一个固定的值：面板的内容取决于用户的选择。我想让Sencha Touch像计算其他元素一样计算高度

我该怎么办

    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]
    });

---

乍一看，您似乎需要将flex放在panels配置选项中

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

---

我尝试添加flex:1，但得到了相同的效果。Sencha Touch仍将相应的高度设置为0px。