并排对齐两个面板以覆盖整个屏幕（ExtJS 6.2.0）

Question

我有这个面板

Ext.define('Mine.view.newDashboardPanel', {
    extend: 'Ext.Container',
     
    xtype: 'basic-panels',

   
    controller: 'newDashboard',


     
    layout: 'fit',...

并创建了这个容器：

Ext.define('Mine.view.newDashboard', {
    extend: 'Ext.Container',
    alias: 'widget.newDashboard',
  
    controller: 'newDashboard',
    reference: 'dashboard',

    layout: {
        type: 'border',
        align: 'stretch '
    },
    height: 620,

    style: {
        'backgroundColor': '#909090 !important'
    },

    items: [{
           
           
            region: 'west',
            xtype: 'panel',
            //margin: '5 0 0 5',


            width: 200,
            collapsible: true, // make collapsible
            id: 'west-region-container',
            layout: 'fit',
            items: [{
                xtype: 'settingsMenu2'

            }]
        },
        {
            xtype: 'basic-panels',
           layout: 'fit'
        }
    ]


});

后面的代码是创建主视图，它是侧边栏和 Mine.view.newDashboardPanel 面板我的问题是面板 (xtype basic-panels) 没有覆盖它的整个分配 space因此 Mine.view.newDashboard 不会覆盖屏幕。如何做到这一点？谢谢！

Answer 1

完成指定地区：'center'

{
    xtype: 'basic-panels',
    region: 'center'
}

Ext.define('Mine.view.newDashboard', {
    extend: 'Ext.Container',
    alias: 'widget.newDashboard',

    controller: 'newDashboard',
    reference: 'dashboard',

    layout: 'border',
    height: 620,

    style: {
        'backgroundColor': '#909090 !important'
    },

    items: [{

        region: 'west',
        xtype: 'panel',
        //margin: '5 0 0 5',

        width: 200,
        collapsible: true, // make collapsible
        id: 'west-region-container',
        items: [{
            xtype: 'settingsMenu2'

        }]
    }, {
        xtype: 'basic-panels',
        region: 'center'
    }]

});

并排对齐两个面板以覆盖整个屏幕（ExtJS 6.2.0）

Align two panels side by side to cover the whole screen (ExtJS 6.2.0)

extjs

extjs5