Sencha Touch : vbox inside hbox 布局问题答案

【问题标题】：Sencha Touch : vbox inside hbox layout issueSencha Touch : vbox inside hbox 布局问题
【发布时间】：2011-09-10 21:23:27
【问题描述】：

我在 hbox 布局中放置了一个 vbox 布局。但是 vbox 不能正常工作。代码如下：

代码：

var panel = new Ext.Panel({
    fullscreen : true,
    layout : {
        type : 'hbox',
        align : 'stretch'
    },
    items : [{
        width : 50,
        layout : {
            type : 'vbox',
            align : 'stretch'
        },
        items : [{
            flex : 1,
            html : '1st'
        }, {
            height : 50,
            html : '2nd'
        }]
    }, {
        flex : 1,
        html : 'Large'
    }]
});

这里，vbox 的 2 个面板相互重叠。如果我只创建 vbox，它会完美运行。代码如下：

代码：

var panel = new Ext.Panel({
    fullscreen : true,
    layout : {
        type : 'vbox',
        align : 'stretch'
    },
    items : [{
        flex : 1,
        html : '1st'
    }, {
        height : 50,
        html : '2nd'
    }]
});

我做错了什么吗？

编辑：

不知何故，我发现，如果我以这种方式交换 vbox 项目，那么它可以工作：

...
layout : {
     type : 'vbox',
     align : 'stretch'
},
items : [{
     height : 50,
     html : '2nd'
}, {
     flex : 1,
     html : '1st'
}]
....

但是，我想要底部较小的项目。

【问题讨论】：

标签： extjs sencha-touch vbox hbox

【解决方案1】：

在您的 hbox 中，vbox 本身缺少 flex 或 height 配置...

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        width: 50,
        flex:1, // this needs to be flexy as well
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            flex: 1,
            html: '1st'
        }, {
            height: 50,
            html: '2nd'
        }]
    }, {
        flex: 1,
        html: 'Large'
    }]
});

【讨论】：