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...