Sencha touch 2 Sencha Touch 2-开关视图

我开始使用Sencha Touch 2 MVC，但我无法克服下面的问题。 我有一个Ext.application代码：

Ext.application({
    name: 'ProjectName',
    appFolder: APP_URL + "app",
    enableQuickTips: true,
    extend: 'Ext.app.Controller',
    phoneStartupScreen: 'LOGO.png',

    controllers: ['Site'],

    views: ['Viewport_login', 'Viewport_reg'],
    layout: 'vbox',



    launch: function() {
        //bootstrap

        Ext.create("Ext.Container", {
            requires: [

            ],
            items: [
                Ext.create("ProjectName.view.Viewport_login", {}),
                Ext.create("ProjectName.view.Viewport_reg", {})

            ]
        });


       return true;

    }

});

查看“Viewport\u login”代码：

Ext.define('ProjectName.view.Viewport_login', {
    extend: 'Ext.Panel',

    requires: [
        'ProjectName.view.Login',
        'ProjectName.view.Header'
    ],


    fullscreen: true,

    initialize: function() {
        console.log("init viewpor_login");
        Ext.create("Ext.Container", {
            //fullscreen: true,
            style: 'background-color: white;',
            layout: 'vbox',
            fullscreen: true,
            scrollable: true,


            items: [
                {
                    xtype: 'Bheader'
                },              
                Ext.create("widget.login")
            ]
        });

        this.callParent();
    }

});

查看“Viewpoer_reg”代码：

Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',

requires: [
    'ProjectName.view.Reg',
    'ProjectName.view.Header'
],


fullscreen: true,

initialize: function() {
    console.log("init viewpor_reg");
    Ext.create("Ext.Container", {
        //fullscreen: true,
        style: 'background-color: white;',
        layout: 'vbox',
        fullscreen: true,
        scrollable: true,


        items: [
            {
                xtype: 'Bheader'
            },  
            Ext.create("widget.reg")
        ]
    });

    this.callParent();
}

});

查看“标题”代码：

Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',

requires: [
    'Ext.Img'
],

initialize: function() {
    console.log("header inited");
},

config: {
    cls: 'bg-holder',
    items: [
        Ext.create("Ext.Img", {
            src: BASE_URL + 'assets/images/header3.png',
            height: 35,
            width: "100%",
            style: "background-position: center 0px; "
        })
    ]
}
});

最后是“站点”控制器的代码：

Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',   


config: {
    views: ['Viewport_login', 'Viewport_reg']

},


init: function() {
    console.log('Init site controller');
    // Start listening for events on views


    this.control({
        // example of listening to *all* button taps
        '#login_button': {          
            tap: function () {

                // HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
            } 
        }           
    });

},

renderRegFOrm: function() {

},

onLaunch: function() {
    console.log('onLaunch site controller');
},
});

首先，我现在有一个问题：如果我在Ext.application launch函数中创建的容器中加载两个视图（“Viewport\u login”、“Viewport\u reg”），则“Header”不会出现。有人能帮我吗，为什么

---

其次，在控制器代码中，您可以看到this.control（…部分。我如何切换到此处的其他视图？

从查看代码来看，您似乎只希望登录和注册中的一个同时出现。我建议您查看容器的

setActiveItem

方法，并以这种方式切换视图

---

我不明白你的第一个问题。另外，我也不明白为什么你已经有了名为

login

和

reg

的视图，却有

widget.login

和

reg

的类（你就不能使用它们吗？）

通过查看代码，您似乎只希望登录和注册中的一个同时出现。我建议您查看容器的

setActiveItem

方法，并以这种方式切换视图

我不明白你的第一个问题。另外，我也不明白为什么你已经有了名为

login

和

reg

的视图，却有

widget.login

和

reg

的类（你就不能使用它们吗？）