The wizard component

I felt pretty good about the data layer I'd built. It was frustrating to have spent time trying to work around this limitation to validators that I found, but the final result works well. It was time to move on to the user interface, starting with the main container for the questionnaire wizard:

// packages/wizard/src/view/Wizard.js
Ext.define('Wizard.view.wizard.Wizard', {
    extend: 'Ext.Panel',
    xtype: 'wizard',
    requires: [
        'Wizard.model.Questionnaire',
        'Wizard.model.Step',
        'Wizard.model.Question'
    ],
    ui: 'wizard',
    bodyCls: 'wizard-body',

    viewModel: 'wizard',
    controller: 'wizard',
    
    layout: 'card',
    
    config: {
        questionnaire: null
    },
    bind: {
        questionnaire: '{questionnaire}',
        activeItem: '{currentPosition}',
        title: '{questionnaire.title}'
    },

    applyQuestionnaire: function(questionnaire) {
        if(!questionnaire) {
            return;
        }

       ...