The navigation bar allows the user not only to proceed through the questionnaire, but also return to previous steps to review them. There's a "restart" button that takes the user back to the introduction. The "finish" button will be the one we'll use to communicate back to the host application when all questions are complete.

Each of these buttons is enabled or disabled depending on the validation state of each step (and therefore each question) and the user's position in the questionnaire. Here's the code:

// packages/wizard/src/view/Navigation.js
Ext.define('Wizard.view.wizard.Navigation', {
    extend: 'Ext.Toolbar',
    xtype: 'wizard-navigation',
    items: [
        {
            text: 'Restart', itemId: 'restart',
            bind: { disabled: '{isIntroduction}' }
        },
        {
            text: 'Previous', itemId: 'prev',
            bind: { disabled: '{isIntroduction}' }
        },
        '->',
        { 
            text: 'Next', itemId: 'next',
            bind: { disabled: '{!isNextEnabled}' }
        },
        {
            text: 'Finish', itemId: 'finish',
            bind: { disabled: '{isNotLastStep}' }
        }
    ]
});

I've delegated the responsibility for enabling and disabling these buttons to a view model. As there are other components that will be interested in these values, they're going to rest at the top-level view model of the wizard. We'll take a look at this code later.