javascript - 将手风琴更改为 vbox 仅呈现第一个子项

Question

最初这个面板有accordion布局。然后显示两个子面板。但是一旦我将其更改为 vbox，它就会显示第二个面板。但是里面没有树！

看图片。

相关代码

OurApp.online_tree_store = Ext.create('Ext.data.TreeStore', {
    root : {
        expanded : true,
        children : []
    }
});
OurApp.online_tree = Ext.create('Ext.tree.Panel', {
    store : OurApp.online_tree_store,
    title : 'Online',
    region: 'north',
    useArrows : true,
    rootVisible : false,
    listeners : {
        itemdblclick : contactitemdblclick
    }
});

/// Note: Offline tree is exactly the same as online tree.

Ext.create('Ext.panel.Panel', {
    closable : false,
    width : 300,
    maxWidth : 400,
    itemId : 'viewport-contacts',
    constrain : true,
    layout : 'accordion', // <--- layout changed to vbox or border
    region : 'west',
    hidden : true,
    border : true,
    defaults : {
        height : '50%', // <--- used for vbox
    },
    tbar : [{
        xtype : 'button',
        text : 'Sign out',
        iconCls : 'icon-disconnect',
        handler : function() {
        }
    }],
    items : [OurApp.online_tree, OurApp.offline_tree],
});

Answer 1

height: '50%' 应该是 flex: 1。

您还需要指定 align: 'stretch'

Ext.require('*');

Ext.onReady(function() {

    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: document.body,
        width: 400,
        height: 400,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            title: 'P1',
            flex: 1
        }, {
            title: 'P2',
            flex: 1
        }]
    });

});