vbox布局在边框布局中不起作用

Question

我有一项要求，我需要在vbox布局中放入一项。 我的商品有边框布局， west和center原因有一些vbox布局组件。 下面，我要输入项目代码。 在此主面板中是边框布局，并vbox具有vbox原因，但这不起作用。

我的代码：

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        xtype: 'panel',
        height: 100,
        layout : 'fit',
        split: true,// enable resizing
        margin: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margin: '5 0 0 5',
        width: 100,
        layout: 'vbox',
        height: 200,
        items:[{
            title: 'South Region is resizable',
            xtype: 'panel',
            height: 100
            },{
            title: 'ss Region is resizable2',
            xtype: 'panel',
            height: 100
        }],
        collapsible: true,   // make collapsible
        id: 'west-region-container',

    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
        xtype: 'panel',
        width : 300,
        layout: 'vbox',
        margin: '5 5 0 0',
        items:[{
                title: 'South Region is resizable',
                xtype: 'panel',
                height: 50,

        },
            {
                title: 'ss Region is resizable',
                xtype: 'panel',
                height: 10
            }]
    }],
    renderTo: Ext.getBody()
});

以下是我使用vbox布局的实际代码，然后border布局是其中之一。 我收到布局运行失败错误

Ext.define('myApp.myData.myApp', {
    extend: 'Ext.container.Container',
    alias: 'widget.myApp',
    controller: 'myAppController',
    items: [{
        xtype: 'label',
        margin: '5 10 0 0',
        height: 28
    },
    {
        xtype: 'panel',
        itemId: 'mainPanel',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            margin: '3 10 2 5'
        },
        items: [
            {
                xtype: 'myPanel'
            },{
                xtype : 'panel',
                height: 500,
                width : 300,
                layout: 'border',
                items :[{
                    xtype : 'panel',
                    layout: {
                        type: 'vbox',
                        align: "stretch"
                    },
                    items :[{
                        xtype: 'myPanel1'
                    },{
                        xtype : 'myPanel2'
                    }]
                },{
                    xtype : 'panel',
                    layout: {
                           type: "vbox",
                           align: "stretch"
                        },
                    items :[{
                        xtype: 'myGrid'
                    }]
                }]
            } 
        ]
    }]
});

任何帮助都会有所帮助。

Answer 1

将layout更改为：

layout: {
   type: "vbox",
   align: "stretch"
}

并将flex放在子项上：

flex: 1