The wizard is functionally complete and it's time to show how we can embed it in an application. Look back and you'll see that the main wizard component had the following load method:

load: function(id) {
    this.getViewModel().setLinks({
        questionnaire: {
            type: 'Wizard.model.Questionnaire',
            id: id
        }
    });
}

This uses the links feature of the view model to trigger the loading of a questionnaire using its preconfigured proxy. With this in mind, the calling code could look like this:

Ext.define('Questions.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    requires: [
        'Wizard.view.wizard.Wizard'
    ],

    alias: 'controller.main',

    listen: {
        controller: {
            'wizard': {
                'wizardcomplete': function(q) {
                    console.log(q);
                }
            }
        }
    },

    onClickButton: function () {
        this.wizard = Ext.create('Ext.Window', {
            header: false, modal: true, layout: 'fit',
            autoShow: true, resizable: false,
            width: 800, height: 600, 
            items: [{ xtype: 'wizard' }],
        });

        this.wizard.down('wizard').load(1);
    }
});

When onClickButton handler fires, Ext.Window is created containing our wizard component, and we then call the load method on the wizard itself, passing the ID of the questionnaire to load.

The view controller also listens for the wizardcomplete event and can use this to get the completed questionnaire instance for further processing and could also close the wizard window. These two integration points are all that a developer needs to use the wizard in their own application, but there's one last thing that I wanted to explore when building this component: theming.