Sencha ExtJS - nest a 100% height BorderLayout inside a VBoxLayout

Question

I am trying to put a BorderLayout inside a VBoxLayout, and having this BorderLayout a 100% height. I try:

Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [
    Ext.create('Ext.panel.Panel', {
        width: '100%',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            Ext.create('Ext.panel.Panel', {
                flex: 0,
                height: 200,
                layout: 'border',
                items: [
                    Ext.create('Ext.panel.Panel', {
                        title: 'toto',
                        region: 'center'
                    })
                ]
            })
        ]
    })

]                           
});

It works well, but if I replace height: 200 with height:'100%', I do not see anything. What I am doing wrong?

Thanks for your help!

(ps: The VBoxLayout is a requirement, my application is much more complex that this example, and I cannot change the VBoxLayout).

Answer 1

I think you must change form flex:0 to flex:1