We're going to use a simplified grid to build this view:
// app/view/categories/Categories.js
Ext.define('Alcohology.view.categories.Categories', {
extend: 'Ext.grid.Panel',
xtype: 'categories',
controller: 'categories',
viewModel: 'categories',
bodyCls: 'categories-body',
requires: [
'Alcohology.view.categories.CategoriesModel',
'Alcohology.view.categories.CategoriesController'
],
bind: {
store: '{categories}'
},
hideHeaders: true,
viewConfig: {
trackOver: false
},
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1 }
]
});We've hidden the grid headers and used the flex configuration option to tell the single column to fill all of the available space. This gives us the functionality we need for a simple scrolling list.
The list's store is then bound to the categories that's defined on the category view model that we'll look at shortly. First, let's take a look at the categories view controller:
// app/view/categories/CategoriesController.js
Ext.define('Alcohology.view.categories.CategoriesController', {
extend: 'Ext.app.ViewController',
alias: 'controller.categories',
listen: {
component: {
'categories': { 'itemclick': 'onItemClick' }
}
},
onItemClick: function(view, record) {
this.redirectTo('category/' + record.getId());
}
});This really couldn't be much simpler; just catch the itemclick event, grab the ID of the selected category, and pass it off to the routing system so that another controller can take care of it. The final part of the category puzzle is the view model and it's even more straightforward, as shown in the following code:
// app/view/categories/CategoriesModel.js
Ext.define('Alcohology.view.categories.CategoriesModel', {
extend: 'Ext.app.ViewModel',
requires: ['Alcohology.store.Categories'],
alias: 'viewmodel.categories',
stores: {
categories: {
type: 'categories',
autoLoad: true
}
}
});This is the MVVM pattern in action, each of the three classes shown here are doing its own thing and nothing more. The view class is describing the presentation, the view model provides the data behind this presentation, and the view controller deals with user interaction.