How do I create a view form its xtype and pass to push function of a navigation view - sencha-touch

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'});