Question

我开始使用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_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; "
        })
    ]
}
});

最后是'Site'控制器的代码：

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启动函数中创建的Container中加载两个视图（'Viewport_login'，'Viewport_reg'），则'Header'不会出现。任何人都可以帮助我，为什么？

其次，在Controller代码中你可以看到this.control（...部分。如何在这里切换到其他视图？

Answer 1

通过查看您的代码，您似乎只需要一次登录和注册。我建议以这种方式查看容器的setActiveItem方法并切换视图。

我不明白你的第一个问题。此外，当您已经拥有名为widget.login和widget.reg的观看时，您不明白为什么您有login和reg课程（您不能只使用这些吗？）

Sencha Touch 2 - 切换视图

1 个答案: