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); 

});