ExtJS vbox 布局自动高度答案

【问题标题】：ExtJS vbox layout autoheightExtJS vbox 布局自动高度
【发布时间】：2011-11-09 23:41:21
【问题描述】：

我有两个高度可变的 extjs 项目要垂直布局。

我正在使用 Ext.container.Container 进行垂直布局，使用以下代码。

Ext.create('Ext.container.Container', {     
    //height:50,
    renderTo: this.renderTo,
    layout: {
        type: 'vbox'
    },      
    items: [item1,item2],
     //autoHeight:true
});

问题是除非指定容器的高度，否则这些项目在页面上不可见。但是，嵌入式小部件的高度不是静态的。

有没有办法解决这个问题？我可以使用的任何其他组件都可以自动拉伸到项目的高度。

【问题讨论】：

标签： extjs4 vbox

【解决方案1】：

将flex 1 应用于您的子元素，而不是高度。如果您希望比率有所不同，您可以使用flex 号码。例如，如果您应用flex: 2 和flex: 1，您将在第一个元素上获得三分之二的填充，在第二个元素上获得三分之一的填充。

供参考：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.VBox-cfg-flex

【讨论】：