javascript - ExtJS 4 垂直适合容器

Question

我有两个嵌套容器，我希望将第一个容器垂直（仅垂直）适应页面大小，将第二个容器适应第一个容器大小。

在调整页面大小的情况下，所有容器都应自动调整大小。

我无法执行此功能。我认为这是一个布局问题。

这是我的示例代码和我的 jsfiddle：

Ext.onReady(function() {
myPanel = Ext.create('Ext.container.Container', {
    layout:'fit',
    flex:1,
    width:100,
    renderTo: Ext.getBody(),
    items: [{
        xtype:'container',
        layout : {
                type : 'vbox',
                align : 'stretch'

            },
        items:[
    {
                    //this is the right panel not collapsible
                    xtype : 'panel',
                    border:true,
                    //hidden:false,
                    bodyBorder:true,
                    padding: '5 5 5 5',

                    itemId:'right',

                    //default layout of inner element is hbox
                    layout : {
                        type : 'hbox',
                        //align : 'stretch'

                    },

                    //takes all possible space
                    flex : 1
                }]}


    ]
});
});

http://jsfiddle.net/eternasparta/yxeSG/

谢谢你们！

Answer 1

视口是监控浏览器大小的关键元素。 http://jsfiddle.net/dbrin/6r7Dd/

var myPanel = Ext.create('Ext.panel.Panel', {
    layout: 'fit',
    width: 200,
    title: 'Panel 1',
    items: [{
        xtype: 'panel',
        title: 'Panel 2',
        layout: 'fit',
        items: [{
            xtype: 'panel',
            title: 'Right P',
            padding: '5'
        }]
    }]
});

Ext.create('Ext.container.Viewport', {
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [myPanel]
});