Ext.js: Vbox布局如何使第一个项目占用所有的空间时，第二个项目是隐藏的

Ext.js: Vbox layout how to make the first item take all the space when the second item is hidden?

本文关键字：项目 空间 隐藏 第二个 Vbox js 布局 Ext 第一个 何使      更新时间：2023-09-26

我有一个vbox布局的面板，里面有两个面板，一个在顶部，一个在底部。通过一些操作，我通过调用底部面板的hide()方法来隐藏它。我现在如何使顶部面板占用所有的空间?

示例:

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);
});
相关文章：