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