When creating this complex layout, you first need to decide on the configuration for each of your panels: what region each panel will belong to, which panels will be collapsible, and what will be the panel margins when expanded and when collapsed.

When it comes to putting the panels in their container, the layout that you must use is Ext.layout.BorderLayout.

The regions of a BorderLayout are fixed at render time. Thereafter, no regions may be removed or added. Be mindful that a BorderLayout must have a center region, which will always fill the space that is not used up by the other regions in the layout.

Border layouts are very popular in modern applications due to the efficient use of space that can be achieved in the GUI. They also contribute to having well-defined interface areas that encapsulate elements that work together to perform a piece of functionality.

Examine how you can use nested border layouts to divide the West Panel into two separate regions, as shown in the following screenshot:

Firstly, set up the two panels that will make up the two regions within the West Panel:

nestedPanel1={
region: 'north',
height: 150
}
nestedPanel2={
region: 'center'
}

Observe how nestedPanel2 is assigned to the center region, so it fills the space not used by nestedPanel1.

As the final step, modify the West Panel by adding the nested panels, and configure its layout as a BorderLayout:

westPanel={
title: 'West Panel',
region: 'west',
margins: '0 0 0 0',
cmargins: '0 5 0 0',
width: 175,
minSize: 100,
maxSize: 250,
bodyStyle:'border:0px',
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items:[nestedPanel1,nestedPanel2]
}