javascript - Ext.js：Vboxレイアウト2番目のアイテムが非表示になっているときに最初のアイテムがすべてのスペースを占めるようにするにはどうすればよいですか？

Question

vboxレイアウトのパネルがあり、その中に2つのパネルがあります。1つは上部に、もう1つは下部にあります。いくつかのアクションを通じて、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);

});