Nearly all of the pieces are in place. Note that I used a lot of binding expressions in the Wizard component so far, but I haven't shown either the top-level view model or how the wizard deals with user interactions. I always like to keep controllers slim and the view controller here is no exception:
// packages/wizard/src/view/WizardController.js
Ext.define('Wizard.view.wizard.WizardController', {
extend: 'Ext.app.ViewController',
alias: 'controller.wizard',
listen: {
component: {
'#next': { click: 'onNextClick' },
'#prev': { click: 'onPrevClick' },
'#restart': { click: 'onRestartClick' },
'#finish': { click: 'onFinishClick' },
'wizard-progress button': { click: 'onStepClick' }
}
},
onNextClick: function() {
var current = this.getViewModel().get('currentPosition');
this.getViewModel().set('currentPosition', current + 1);
},
onPrevClick...