Question

Initially this panel had accordion layout. Both the child panels where shown then. But as soon as I changed it to vbox, it shows the second panel. But no tree inside!

See the image.

Related Code

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%’ should be flex: 1.

You’ll also want to specify 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
        }]
    });

});