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

Question

I have this Panel

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

   
    controller: 'newDashboard',


     
    layout: 'fit',...

and have created this Container :

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


});

The latter code is to create the main view which is a sidebar and the Mine.view.newDashboardPanel panel My problem is that the panel (xtype basic-panels) doesn't cover its whole allocated space and therefore Mine.view.newDashboard doesn't cover the screen. How to achieve this ? Thanks !

Answer 1

To accomplish that specify region:'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'
    }]

});