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

Get Ext JS Application Development Blueprints now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.