My app represents a flowchart. I have a number of views, each with some descriptive html and 2 or 3 buttons (yes/no/maybe) each of which loads the next appropriate view. For example clicking 'yes' on view 1 will load view 2. Clicking 'no' on view 1 will load view 3, etc. No more than 30 views total.

I also have a dedicated home view and about view.

My viewport (Ext.tab.Panel) loads my custom xtypes homepanel (Ext.Panel for my home view), aboutpanel (Ext.Panel for my about view) and pathwaycontainer (Ext.navigation.View for the 'flowchart').

Pathwaycontainer loads my first 'flowchart' view with the custom xtype 'onepanel' which represents my view One.js.

Code:
Ext.define('MyApp.view.Pathway',{
    extend: 'Ext.navigation.View',
    xtype: 'pathwaycontainer',


    config: {
        title: 'Pathway',
        iconCls: 'arrow_right',
        items: [
            {
                xtype: 'onepanel'
            }
        ]
    }    
});
I had hoped that I could use view.push({xtype: 'twopanel'}) on the button handler in One.js to push my next view and auto create the back button but this errors with 'view is not defined'. One.js (shortened):

Code:
Ext.define('MyApp.view.One', {
    extend: 'Ext.Panel',
    xtype: 'onepanel',


    config: {
        title: 'One',
        iconCls: 'info',
        items: [
            {
                title: 'One'
            },
            {
                html: 'The question',
            },
            {
                xtype: 'button',
                text: 'Yes',
                handler: function() {
                    view.push({
                        xtype: 'twopanel'
                    });
                }


            }
        ]
    }
});
So my question is, is Ext.navigation.View the right approach and if so, how do I push my views when each view is self contained within its own file?

Thanks for any help.