Categorically speaking

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