Sencha touch 如何从app.js调用另一个视图

当应用程序加载时，它调用app.js（在index.html中调用）。我想做的是，当应用程序调用app.js时，我需要app.js来初始化Main.js视图

简而言之，当app.js被调用时，它应该调用Main.js视图

我如何通过编程实现这一点

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() {

                }
                });

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

//
Ext.Loader.setPath({
“Ext”：“lib/touch/src”
});
//
外部应用程序({
姓名：'我的'，
要求：[
“Ext.MessageBox”
],
视图：['Main']，
图标：{
phoneStartupScreen:'resources/loading/Homescreen.jpg'，
tabletStartupScreen:“资源/加载/主屏幕~ipad.jpg”，
启动：函数（）{
//销毁#appLoadingIndicator元素
Ext.fly（'appLoadingIndicator'）.destroy（）；
//初始化主视图
add（Ext.create（'My.view.Main'）；
},
未更新：函数（）{
}
});

Main.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() {

                }
                });

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

Ext.define（“My.view.Main”{
扩展：“Ext.tab.Panel”，
需要：['Ext.TitleBar']，
配置：{
tabBarPosition:'底部'，
项目：[
{
标题:"欢迎",，
iconCls:“家”，
styleHtmlContent:对，
可滚动：对，
项目：{
停靠：“顶部”，
xtype:'标题栏'，
标题：“欢迎来到Sencha Touch 2”
},
html:[
“您刚刚生成了一个新的Sencha Touch 2项目。您现在看到的是”，
“内容-编辑该文件”，
“并刷新以更改此处呈现的内容。”
].join（“”）
},
{
标题：“开始”，
iconCls:“行动”，
项目：[
{
停靠：“顶部”，
xtype:'标题栏'，
标题：“入门”
},
{
xtype:'视频'，
网址：'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl:'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});

这样做

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

---

添加上面的行而不是

//初始化主视图Ext.Viewport.add（Ext.create（'My.view.main'））；}，

this..我看到您还没有关闭

}

图标：属性。我正在使用Xcode进行开发。通常IDE建议如果有分号，则缺少括号。有没有一种方法可以将此功能添加到xCode以显示语法错误？从未使用过xCode。很抱歉什么是SenchaTouch开发者常用的IDE？（我是SenchaTouch的新手）Xcode听起来不错。没有特定的IDE。使用您熟悉的任何IDE。我使用Eclipse（即JavaScript模式）主要是通过良好的代码高亮显示。