Before we get started, let's take a look at a screenshot of the final result we will have once we finish this chapter:
The e-mail client module is composed of four major pieces: the Mail menu, the Inbox (which is the list of e-mails), the preview mail panel and the New Message window. The first thing we are going to implement is Inbox, which is a Grid panel with some enhancements. So, following our development workflow, we will first create the model, then the store, then the view, and finally, the controller to listen to the events for which we are interested in taking some action.
So first, we need to create a model to represent an e-mail message that is going to be displayed on the Grid panel. We will create a new model class named Packt.model.mail.MailMessage:
Ext.define('Packt.model.mail.MailMessage', {
extend: 'Ext.data.Model',
fields: [
{ name: 'importance' },
{ name: 'icon' },
{ name: 'attachment...