How to call another view from app.js - sencha-touch

Question

When the application loads, it calls app.js (This is called in the index.html). What i want to do is when the app calls app.js, i need app.js to initialize the Main.js view.
in a nutshell, when app.js gets called, it should call the Main.js view.
How can i do this programatically;
app.js
//<debug>
Ext.Loader.setPath({
'Ext': 'lib/touch/src'
});
//</debug>
Ext.application({
name: 'My',
requires: [
'Ext.MessageBox'
],
views: ['Main'],
icon: {
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('My.view.Main'));
},
onUpdated: function() {
}
});
Main.js
Ext.define("My.view.Main", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});

Answer 1

Do this,
// Initialize the main view
Ext.Viewport.add({
xclass:'My.view.Main'
});