You can also use the weight property to give precedence to a region—for example, giving precedence to the West region over the North region. All these changes mean that you should not often need nesting with border layout, speeding up rendering of components that use that layout.
Ext.define('MyApp.view.MainViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'west',
weight: -1,
width: 150,
title: 'My Panel'
},
{
xtype: 'panel',
region: 'north',
weight: -2,
height: 150,
title: 'My Panel'
},
{
xtype: 'panel',
region: 'south',
weight: -2,
height: 150,
title: 'My Panel'
},
{
xtype: 'panel',
region: 'east',
width: 150,
title: 'My Panel'
},
{
xtype: 'panel',
region: 'center',
title: 'My Panel'
}
]
});
me.callParent(arguments);
}
});