Extjs 100%上的外部容器高度和宽度

我正在使用extjs3.4

我想要一个容器，它占据屏幕100%的高度和宽度。在这个容器里，我只有两个面板，每个面板有50%的高度和100%的宽度

我真的不知道我做错了什么？我可以以像素为单位指定每个组件的宽度和高度，但我想设置百分比。如何做到这一点

Ext.onReady(function() {

        var ct = new Ext.Container({
            renderTo: Ext.getBody(),
            style: 'background-color: pink;',
            width: '100%',
            height: '100%',
            items:[
                {
                    layout: 'vbox',
                    align: 'stretch',
                    items:[{
                        xtype: 'panel',
                        title: 'first panel',
                        flex: .5
                    },{
                        xtype: 'panel',
                        title: 'second panel',
                        flex: .5
                    }]
                }]
        });
    });

您可以使用“”，类似于：

Ext.onReady(function () {
    var viewPort = new Ext.Viewport({
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            xtype: 'panel',
            flex: 1
        },
        items: [{
            title: 'first panel'
        }, {
            title: 'second panel'
        }]
    });

});