Now that we have everything we need in place, let's implement the functionality that allows the user to change the position of the mail preview. The user can choose to see the preview panel on the right-hand side, on the south, or to hide it.
So the first thing we need to do is to create a new controller for the e-mail client module:
Ext.define('Packt.controller.mail.Mail', {
extend: 'Ext.app.Controller',
views: [ // #1
'mail.MailContainer',
'mail.MailList',
'mail.MailPreview'
],
stores: [// #2
'mail.MailMessages',
'mail.MailMenu'
],
refs: [// #3
{
ref: 'south', // #4
selector: 'mailcontainer container#previewSouth'
},
{
ref: 'east', // #5
selector: 'mailcontainer container#previewEast'
}
]
});First, we must not forget to declare the views we created for this module (#1). Then, we have the stores (#2). And finally, we need to...