Question

我已经搜索了这个问题超过100次并且它总是相同的答案，但它对我没有帮助。所以我的问题是：如何通过点击sencha touch 2中的按钮来切换视图？我有2个观点：

第一

Ext.define('Meet_Me.view.Menue', {
extend: 'Ext.Container',
alias: 'widget.Menue',
layot: 'card',
xtype: 'menue',

requires: [],
config: {


    xtype: 'container',
    layout: 'vbox',
    centered: true,
    items: [
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                 {
                    xtype: 'button',
                    text: 'Erstellte Events anzeigen',
                    width: 300,
                    height: 100,
                    margin: '30 5 5 30',
                    id: 'button1',
                },
                {
                    xtype: 'button',
                    text: 'Event erstellen',
                    width: 300,
                    height: 100,
                    margin: '30 5 5 30',
                    id: 'event_erstellen_button'
                }
            ]
        },
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'button',
                    text: 'Event suchen',
                    width: 300,
                    height: 100,
                    margin: '30 5 5 30',
                    id: 'event_suchen_button'
                },
                {
                    xtype: 'button',
                    text: 'Teilnehmende Events anzeigen',
                    width: 300,
                    height: 100,
                    margin: '30 5 5 30',
                    badgeText: 'New',
                    id: 'teilnehmende_events_button'
                }
            ]
        },
        {
            xtype: 'container',
            layout: 'hbox',

            items: [
                 {
                    xtype: 'button',
                    text: 'Profil',
                    width: 350,
                    height: 100,
                    margin: '30 5 5 30',
                    //centered: true,
                    id: 'profil_button'

                }
            ]
        }

    ]
  }
});

这里重要的是带有id的Button：'button1'

第二种观点：

Ext.define('Meet_Me.view.Login', {
extend: 'Ext.Container',
alias: 'widget.Login',
xtype: 'login',
layot: 'card',

requires: [
    'Ext.Panel',
    'Ext.field.Email',
    'Ext.field.Password',
    'Ext.Button',
    'Ext.Label'
],

config: {

    items: [
        {
            title: 'Login',

            xtype: 'panel',
            itemId: 'homePanel',
            layout: 'fit',

            items: [
                {
                    xtype: 'panel',
                    itemId: 'loginPanel',
                    //centered: true,
                    //margin: '5% 30% 0% 10%',
                    items: [
                        {
                            items: [
                                {
                                    xtype: 'emailfield',
                                    width: '70',
                                    label: 'Email',
                                    placeHolder: 'email@example.com'
                                },
                                {
                                    xtype: 'passwordfield',
                                    width: '70',
                                    label: 'Passwort',
                                    placeHolder: 'min. 6 Zeichen'
                                },
                            ]
                        },
                        {
                            xtype: 'button',
                            id: 'loginButton',
                            margin: 20,
                            padding: 8,
                            text: 'Anmelden'
                        },
                        {
                            xtype: 'button',
                            itemId: 'registerButton',
                            margin: 20,
                            padding: 8,
                            text: 'Registrieren'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    hidden: true,
                    itemId: 'welcomePanel',
                    items: [
                        {
                            xtype: 'label',
                            //centered: true,
                            html: 'Welcome!',
                            itemId: 'welcomeLabel'
                        }
                    ]
                }
            ]
        }
    ]
  }

});

和控制器：

Ext.define('Meet_Me.controller.Main', {
extend: 'Ext.app.Controller',
requires: [
    'Meet_Me.view.Login',
    'Meet_Me.view.Menue',
],
config: {
    touchstarttime: 0,

    control: {
        '#button1': {
            tap: 'btn1click'
        }
    }
},

btn1click: function (button, e, options) {
    console.log('Button 1 was clicked');
    Ext.Viewport.add({
        xtype: 'Login'
    });
 }
});

问题是显示了登录，但第一个带有4个按钮的视图仍然存在。如何删除第一个视图？

Answer 1

您可以使用Ext.Viewport.animateActiveItem（）

Answer 2

如果你想使用'card'布局，setActiveItem（）就是改变项目。

请参阅以下小提琴。 https://fiddle.sencha.com/#fiddle/16hu

按钮上的切换视图在secha touch 2.4.2中单击

2 个答案: