javascript - Ext.js：Vbox布局如何在第二项隐藏时使第一项占据所有空间？

Question

我有一个带有 vbox 布局的面板，里面有两个面板，一个在顶部，一个在底部。通过一些操作，我通过调用其 hide() 方法来隐藏底部面板。我现在怎样才能让顶部面板占据所有空间？

Answer 1

这是一个示例：

Ext.require('*');

Ext.onReady(function(){

    var p1 = new Ext.panel.Panel({
        flex: 1,
        title: 'Top panel'
    });

    var p2 = new Ext.panel.Panel({
        title: 'Bottom panel',
        flex: 1
    });

    new Ext.container.Viewport({
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [p1, p2]
    });

    var visible = true;
    setInterval(function(){
        if (visible) {
            p2.hide();
        } else {
            p2.show();
        }
        visible = !visible;
    }, 1000);

});