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