Question

I’ve seen examples of the new NavigationView component in Sencha Touch. How would I switch to another view based on using its xtype. The API docs seem to have omitted a useful example showing most common usage (i.e. using the xtype with creating a new view). Or am I missing something?

In their example: http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.View

They are using the reference ‘view’ to push a new view.
But my questions are:

1) If the view that has initially been navigated to is a result of an xtype load like so:

Ext.Viewport.add({xtype:'testnavview'});

then how do I then get a reference to it to push views onto it if its implicitly loaded using xtype from the originating controller?

2) how can then I then push views onto the navigation view using the xtype (see below?) …

i.e. can I do something like this:

Ext.define('MyApp.view.TestNav', {
    extend: 'Ext.NavigationView',
    alias: 'widget.testnavview',
    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'View 1',
                items: [
                {
                    xtype: "button",
                    text: "View1",
                    handler: function () {
                        console.log("handler view1");

                        this.push({ xtype: "View1" });

                    }
                },
                {
                    xtype: "button",
                    text: "View2"
                },
                 {
                     xtype: "button",
                     text: "View3"
                 },
                 {
                     xtype: "button",
                     text: "View4"
                 }

                ]
            }
        ]
    }

});

Answer 1

You can retrieve you navigation view by adding a reference to it in your controller :

refs: {
  navigationView: 'navigationview'
}

Then you get it anywhere in your controller like this :

this.getNavigationView().push({xtype: 'myPushedView'});