在vbox上设置autoHeight不会设置高度

Question

我正在使用ExtJs 3.4.0。

我对autoHeight属性和布局有疑问：“ vbox”。

我希望将autoHeight：true设置为所有包含元素的vbox的高度。但是，所有元素都不可见。仅当我将height设置为某个数字（例如height：400）时，它们才可见。是否可以在vbox上设置autoHeight属性？

我的代码是here

Ext.onReady(function () {

    var panel = new Ext.Panel({
        renderTo: Ext.getBody(),
        height: 400,
        items: [{
            layout: 'vbox',
            autoHeight: true,
            height: 'auto',
            items: [{
                layout: 'form',
                items: {
                    xtype: 'textfield',
                    fieldLabel: 'first test'
                }
            }, {
                layout: 'form',
                items: {
                    xtype: 'textfield',
                    fieldLabel: 'second test'
                }
            }]
        }]
    })

});

Answer 1

您忘记了父元素的布局：

Ext.onReady(function () {

    var panel = new Ext.Panel({
        renderTo: Ext.getBody(),
        height: 400,
        layout: 'fit', // This is forgotten. 
        items: [{
            layout: 'vbox',
            items: [{
                layout: 'form',
                items: {
                    xtype: 'textfield',
                    fieldLabel: 'first test'
                }
            }, {
                layout: 'form',
                items: {
                    xtype: 'textfield',
                    fieldLabel: 'second test'
                }
            }]
        }]
    })

});