So far, we have two main pieces of the client e-mail module. We need to organize them so that it looks like the first screenshot we demonstrated in this chapter. To do so, we are going to use a container and apply the border layout to it.
Note
Why are we using a container instead of a panel? The container is a lighter component than the panel. We are not looking at using the panel's capabilities, such as panel header and DockedItem; we only want to use something to wrap some components and organize them using a specific layout. So in this case, the container is a better choice.
So, let's take a look at the MailContainer component:
Ext.define('Packt.view.mail.MailContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mailcontainer',
requires: [ // #1
'Packt.view.mail.MailList',
'Packt.view.mail.MailPreview',
'Packt.view.mail.MailMenu'
],
layout: {
type: 'border' // #2
},
initComponent...