A thread is a collection of e-mail messages, and the thread view makes up the left-hand pane of our application. It looks something like this:
// app/view/threads/Threads.js
Ext.define('Postcard.view.threads.Threads', {
extend: 'Ext.DataView',
xtype: 'threads',
cls: 'thread-view',
viewModel: 'threads',
controller: 'threads',
border: true,
deferEmptyText: false,
emptyText: 'No messages',
autoScroll: true,
itemSelector: '.thread',
bind: '{threads}'
tpl: new Ext.XTemplate('<tpl for=".">',
'<div class="thread">',
'<div class="date">{lastMessageOn:date("H:m")}</div>',
'<div class="details">',
'<div class="header">{people} - {subject}</div>',
'<div class="body">{[this.stripHtml(values.lastMessageSnippet)]}</div>',
'</div>',
'</div>',
'</tpl>', {
stripHtml: function(html) {
var div = document.createElement('div'),
div.innerHTML = html;
return div.textContent || div.innerText || '';
}
})
});We knew from our design work that we would use a DataView for this class and its implementation turns out to be fairly straightforward. We're binding its store to the threads store on the view model itself also called as threads.
Look back at the design and you'll see that we anticipated a method to strip HTML from the message body and here it is; a little bit of trickery that uses a temporary DOM element to let the browser do the work for us.
Refer to ViewModel in the following code:
// app/view/threads/ThreadsModel.js
Ext.define('Postbox.view.threads.ThreadsModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.threads',
stores: {
threads: {
type: 'threads',
remoteFilter: true,
filters: [
{
property: 'tag',
value: '{currentTag}'
},
{
property: 'searchTerm',
value: '%{searchTerm}%'
}
]
}
}
});This is actually the most complicated view model in the whole application and most of this complexity should be familiar from Chapter 6, Practical – Monitoring Dashboard. The filter array, along with the remoteFilter setting, will be responsible for sending a JSON object containing a filter definition through to the server. In this case, we see that we are consuming values from the main view model as broadcast up by the tag picker combo and search field in the header.
We talked about this before, but it's worth highlighting again. The data flows from the header view to the main view model and then into the thread view. This is an incredibly simple way of communicating between parts of an application without these parts needing to be aware of each other.
Refer to
ViewController in the following code:
// app/view/threads/ThreadController.js
Ext.define('Postcard.view.threads.ThreadsController', {
extend: 'Ext.app.ViewController',
alias: 'controller.threads',
listen: {
component: {
'threads': {
itemclick: function(dataview, record) {
this.redirectTo('thread/' + record.getId() + '/' + 'messages'),
}
}
},
controller: {
'*': {
threadschanged: function() {
this.getViewModel().get('threads').reload();
}
}
}
}
});More of these event listeners, and so on. We knew they'd come in handy, but they're everywhere! In the thread view controller, we listen for the DataView's itemclick event and simply redirect the application off so that another controller's route can take care of it. Fire and forget.
In turn, we listen for a
threadschanged event, which is issued when a thread is added. This allows you to refresh the DataView's store in the view model to see the effects of the added thread. We don't know or care where threadschanged came from.