Passing data between navigation views in Sencha Touch 2

I've grossly neglected this blog so I though I'd best put something up. I've been using Sencha Touch recently and here is a way for passing data between navigation views.

The Views:

Ext.define('DataTest.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.navigation.View',
        'DataTest.view.FormPage1'
    ],
    config: {
        tabBarPosition: 'bottom',
        layout: 'fit',
        items: [
            {
                xtype: 'navigationview',
                itemId: 'mainNavView',
                navigationBar: {
                    docked: 'top'
                },
                items: [{
                        xtype: 'formpage1'
                    }]
            }
        ]
    }
});

Some Forms

Ext.define('DataTest.view.FormPage1', {
    extend: 'Ext.form.Panel',
    xtype: 'formpage1',
    config: {
        nextpage: 'formpage2',
        items: [{
                html: 'Form Page 1'
            }, {
                xtype: 'textfield',
                name: 'text1',
                label: 'Text 1'
            }, {
                xtype: "button",
                itemId: "nextButton",
                text: 'Next'
            }]
    }
});

Ext.define('DataTest.view.FormPage2', {
    extend: 'Ext.form.Panel',
    xtype: 'formpage2',
    config: {
        nextpage: 'formpage3',
        items: [{
                html: 'Form Page 2'
            }, {
                xtype: 'textfield',
                name: 'text2',
                label: 'Text 2'
            }, {
                xtype: "button",
                itemId: "nextButton",
                text: 'Next'
            }]
    }
});

Ext.define('DataTest.view.FormPage3', {
    extend: 'Ext.form.Panel',
    xtype: 'formpage3',
    config: {
        nextpage: '',
        items: [{
                html: 'Form Page 3'
            }, {
                xtype: 'textfield',
                name: 'text3',
                label: 'Text 3'
            }, {
                xtype: "button",
                itemId: "nextButton",
                text: 'Fin'
            }]
    }
});

And finally the controller

Ext.define('DataTest.controller.Main', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.Anim'],
    config: {
        refs: {
            mainNavView: "main #mainNavView",
            nextButton1: "formpage1 #nextButton",
            nextButton2: "formpage2 #nextButton",
            nextButton3: "formpage3 #nextButton"
        },
        control: {
            mainNavView: {
                activate: "onMainNavViewActivate",
                push: "onMainNavViewPush",
                pop: "onMainNavViewPop",
            },
            nextButton1: {tap: "onNextButtonTap"},
            nextButton2: {tap: "onNextButtonTap"},
            nextButton3: {tap: "onNextButtonTap"}
        }
    },
    onMainNavViewActivate: function() {
        this.dataObj = {};
    },
    onMainNavViewPush: function(self, view) {
        view.setValues(this.dataObj);
        console.log("push: ", this.dataObj);
    },
    onMainNavViewPop: function(self, view) {
        this.dataObj = Ext.Object.merge(this.dataObj, view.getValues());    
        console.log("pop: ", this.dataObj);
    },
    onNextButtonTap: function(self) {
        var form = self.up('formpanel'),
                nextPage = form.getNextpage();
        this.dataObj = Ext.Object.merge(this.dataObj, form.getValues());
        if (nextPage != '') {
            this.getMainNavView().push({xtype: self.up('formpanel').getNextpage()});
        } else {
            this.getMainNavView().reset();
        }
    }
});