I felt pretty good about the data layer I'd built. It was frustrating to have spent time trying to work around this limitation to validators that I found, but the final result works well. It was time to move on to the user interface, starting with the main container for the questionnaire wizard:
// packages/wizard/src/view/Wizard.js
Ext.define('Wizard.view.wizard.Wizard', {
extend: 'Ext.Panel',
xtype: 'wizard',
requires: [
'Wizard.model.Questionnaire',
'Wizard.model.Step',
'Wizard.model.Question'
],
ui: 'wizard',
bodyCls: 'wizard-body',
viewModel: 'wizard',
controller: 'wizard',
layout: 'card',
config: {
questionnaire: null
},
bind: {
questionnaire: '{questionnaire}',
activeItem: '{currentPosition}',
title: '{questionnaire.title}'
},
applyQuestionnaire: function(questionnaire) {
if(!questionnaire) {
return;
}
...