Javascript 如何在sencha touch2中导航页面？

我是sencha touch的新手，我被推荐用于学习目的。
在这个项目中，我试图添加登录模块，如果登录成功，那么其他的东西就是display（已经在项目中了）

我在

app.js

文件中进行了更改，并加载了登录表单（此操作已完成）。

app.js:

ToolbarDemo = new Ext.Application({
    name: "ToolbarDemo",

    launch: function() {
        this.views.Home = new this.views.Home();
        //this.views.viewport = new this.views.Viewport();
        //this.views.homecard = this.views.viewport.getComponent('home');
    }
});

ToolbarDemo.views.Home = Ext.extend(Ext.form.FormPanel, {
    fullscreen: true,
    title: 'Login',
    cls:'Loginscreen',
    id:'loginFormPanel',
    items: 
        [
        {
            html: '<div align="center"><img style="height: 100px; width: 100px;" src="stylesheets/images/main-logo.png" /></div>'
        },
        {
            xtype: 'fieldset',
            items: [
                {
                            xtype: 'textfield',
                            name : 'name',
                            id:'name',
                            placeHolder : 'User Name',
                },{
                            xtype: 'passwordfield',
                            name : 'password',
                            placeHolder : 'Password',
                }
           ]
        },
        {
                xtype:  'button',
                text:   'Login',
                cls:'LogingButton',
                ui:     'confirm',
                itemId:'loginbutton',
                handler: function() {
                    var name = Ext.getCmp('name').getValue();
                    //var pass = Ext.getCmp('password').getValue();
                    if(name != '')
                    {
                        //ToolbarDemo.app.switchMainView('ToolbarDemo.view.Viewport');
                        //Ext.Viewport.setActiveItem(Ext.create('ToolbarDemo.view.Viewport'));
                        //this.redirectTo('Viewport');
                        //var firststep = Ext.create('ToolbarDemo.view.Viewport');
                        //Ext.Viewport.setActiveItem(firststep);
                        /*ToolbarDemo = new Ext.Application({
                             name: "ToolbarDemo",
                        launch: function() {
                            this.views.viewport = new this.views.Viewport();
                            this.views.homecard = this.views.viewport.getComponent('home');
                        }
                        });*/
                        alert("aa");
                    }
                }
        }
        ],
    });   

ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    xtype: 'viewport',

    initComponent: function() {
        Ext.apply(this, {
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                { xtype: 'homecard', id: 'home' },
                { xtype: 'searchcard' },
                { xtype: 'actioncard' },
                { xtype: 'logincard' },
                { xtype: 'settingscard' },
                { xtype: 'morecard' }
            ]
        });
        ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

在

Home.js

中，我创建了登录屏幕，如果用户名不为空，我想将其重定向到包含其他页面的

Viewport.js

我尝试了一些在if块中注释的东西

Home.js:

ToolbarDemo = new Ext.Application({
    name: "ToolbarDemo",

    launch: function() {
        this.views.Home = new this.views.Home();
        //this.views.viewport = new this.views.Viewport();
        //this.views.homecard = this.views.viewport.getComponent('home');
    }
});

ToolbarDemo.views.Home = Ext.extend(Ext.form.FormPanel, {
    fullscreen: true,
    title: 'Login',
    cls:'Loginscreen',
    id:'loginFormPanel',
    items: 
        [
        {
            html: '<div align="center"><img style="height: 100px; width: 100px;" src="stylesheets/images/main-logo.png" /></div>'
        },
        {
            xtype: 'fieldset',
            items: [
                {
                            xtype: 'textfield',
                            name : 'name',
                            id:'name',
                            placeHolder : 'User Name',
                },{
                            xtype: 'passwordfield',
                            name : 'password',
                            placeHolder : 'Password',
                }
           ]
        },
        {
                xtype:  'button',
                text:   'Login',
                cls:'LogingButton',
                ui:     'confirm',
                itemId:'loginbutton',
                handler: function() {
                    var name = Ext.getCmp('name').getValue();
                    //var pass = Ext.getCmp('password').getValue();
                    if(name != '')
                    {
                        //ToolbarDemo.app.switchMainView('ToolbarDemo.view.Viewport');
                        //Ext.Viewport.setActiveItem(Ext.create('ToolbarDemo.view.Viewport'));
                        //this.redirectTo('Viewport');
                        //var firststep = Ext.create('ToolbarDemo.view.Viewport');
                        //Ext.Viewport.setActiveItem(firststep);
                        /*ToolbarDemo = new Ext.Application({
                             name: "ToolbarDemo",
                        launch: function() {
                            this.views.viewport = new this.views.Viewport();
                            this.views.homecard = this.views.viewport.getComponent('home');
                        }
                        });*/
                        alert("aa");
                    }
                }
        }
        ],
    });   

ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    xtype: 'viewport',

    initComponent: function() {
        Ext.apply(this, {
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                { xtype: 'homecard', id: 'home' },
                { xtype: 'searchcard' },
                { xtype: 'actioncard' },
                { xtype: 'logincard' },
                { xtype: 'settingscard' },
                { xtype: 'morecard' }
            ]
        });
        ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

那么如何浏览页面呢？我很努力，但没有帮助

另一个问题：

我还参考了其他教程以及sencha的官方网站，其中他们使用了

控制器、模型和视图

类型模式，在我的项目中没有

控制器

那么，我应该遵循哪些类型的编码格式来帮助我理解senchatouch

我的项目适合实践吗

我参考了不同的教程，我感到困惑。那我该怎么办？

---

提前感谢。

阅读本文中的第四点-从通用函数设置容器动画并激活容器，您将了解如何执行此操作。我们的实用程序类中通常有一个公共函数，负责页面导航

对于森刹触法的修炼，你似乎还缺乏一些了解。你应该找一本好书，花些时间理解基本概念。以下是关于如何创建Sencha Touch应用程序的良好教程：

如果您想要一个高级教程，这里有一个完整的教程，提供了一个循序渐进的应用程序开发过程：

---

对这本书有什么建议吗？@DS9：我觉得斯瓦伦杜分享的教程非常好。你为什么要这本书，就看这本吧。