Making progress

The progress bar is a series of buttons that allows the user to determine how far they are along the questionnaire process and skip back to an earlier step. Each button needs to be aware of the user's position in the questionnaire in order to determine whether it should be enabled or disabled. The "start" and "end" buttons are fixed, wherein they are available on every questionnaire, but the numbered step buttons need to be automatically generated and bound to the steps for currently loaded questionnaire. Let's take a look at the code:

// packages/wizard/src/view/Progress.js
Ext.define('Wizard.view.wizard.Progress', {
    extend: 'Ext.Container',
    xtype: 'wizard-progress',
    
    config: {
        steps: null
    },
    defaultBindProperty: 'steps',
    defaultType: 'button',
    baseCls: 'wizard-progress',
    layout: {
        type: 'hbox',
        pack: 'center'
    },
    
    applySteps: function(steps) {
        
        var lineHtml = '<div class="wizard-progress...