Ext.Container 高度和宽度为 100%

Question

我正在使用 extjs 3.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
                    }]
                }]
        });
    });

Answer 1

您可以使用“ViewPost”，例如：

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'
        }]
    });

});

Ext.Container 高度和宽度为 100%

Ext.Container height and width on 100 percent

extjs