Question

我正在编写一个Sencha Touch 2应用程序，我遇到了切换视图的问题。我有两个视图（LoginPanel和RegisterPanel），我想通过单击按钮从LoginPanel切换到RegisterPanel。我想使用“makeAccount”按钮转到RegisterPanel视图。我尝试了许多技巧，但是没有人工作。这是我的代码：

app.js

Ext.application({
name: 'kody2',

requires: [
    'Ext.MessageBox'
],

controllers: [
   'Main' 
],

views: [
    'HomeContainer',
    'LoginPanel',
    'Produkty',
    'Start',
    'SkanujKod',
    'Opcje',
    'KatalogPDF',
    'RegisterPanel',
    'SimpleProduct',
    'ForgotPassword'
],

viewport: {
    layout: {
        type: 'card',
        animation: {
            type: 'fade',
            direction: 'left',
            duration: 300
        }
    }
},

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('kody2.view.HomeContainer'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}

}）;

LoginPanel.js

Ext.define('kody2.view.LoginPanel', {
extend: 'Ext.Panel',
xtype: 'loginpanel',

config: {
    title: 'Twoje konto',
    iconCls: 'user2',

    styleHtmlContent: true,
    scrollable: true,
    items: [
        {
            xtype: 'fieldset',
            id: 'formContent',
            title: 'Zaloguj się',
            items: [

                {
                    xtype: 'emailfield',
                    name: 'login',
                    id: 'email_login',
                    label: 'Login'
                },
                {
                    xtype: 'passwordfield',
                    name: 'password',
                    id: 'form_password',
                    label: 'Hasło'
                },
                {
                    xtype: 'button',
                    text: 'Załóż konto',
                    id: 'makeAccount',
                    action: 'register'
                },
                {
                    xtype: 'button',
                    text: 'Zapomniałem hasło',
                    id: 'forgotPassword'
                },
                {
                    xtype: 'button',
                    text: 'Zaloguj',
                    id: 'logowanie'
                }
            ]
        }

    ]

}

}）;

和控制器：

Ext.define('kody2.controller.Main', {
extend: 'Ext.app.Controller',

config: {
    control: {
        'button[action=register]': {
                tap: 'myFunction'
            }
        }
    },

myFunction: function() {
    Ext.Viewport.add({
        xtype: 'register'
    });
}

}）;

感谢您的帮助！

Answer 1

您只需在视口中添加注册视图，但不要将其设置为活动项。

Ext.Viewport.setActiveItem({xtype:'register'});

上面一行将在视口中添加注册视图，并设置为ActiveItem。

<强>更新

Ext.define('kody2.controller.Main', { 
    extend: 'Ext.app.Controller', 
    config: { 
        control: { 
            'button[action=register]': { 
                tap: 'myFunction' 
            } 
        } 
    }, 
    myFunction: function() { 
        Ext.Viewport.setActiveItem({ xtype: 'register' }); 
        console.log(Ext.Viewport.getActiveItem().xtype); 
    } 
});

如何使用按钮更改Sencha Touch 2中的视图？

1 个答案: