Question

我正在使用Sencha Touch创建新的通讯布局。我从一个vbox面板（P1）开始。在这个面板中是一个hbox面板（P1Content），它有“左列”，间隔和“右列”面板。这两列都是vbox，并且包含带有内容的面板。然后我尝试在P1Content（P1Bottom）下添加另一个面板。这是问题所在。 P1Bottom与P1Content的内容重叠。我使用Web Inspector并发现Sencha Touch将Panel 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]
    });

Answer 1

一眼就看出你需要将flex放在面板配置选项

中

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

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

1 个答案: