Switch View on button click in secha touch 2.4.2 - button

Question

I already searched for this question for like more than 100 times and it´s always the same answers, but it doesn´t help me. So my question is:
How can I switch the views by click on a button in sencha touch 2?
I have 2 views:
first
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'
}
]
}
]
}
});
The important thing here is the Button with the id: 'button1'
The second view:
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'
}
]
}
]
}
]
}
});
and the Controller:
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'
});
}
});
The problem is that the Login is shown but the first view with the 4 buttons is still there. How do get the first view removed?

Answer 1

you can use Ext.Viewport.animateActiveItem()

Answer 2

If you want to use 'card' layout, setActiveItem() is change items.
See following fiddle.
https://fiddle.sencha.com/#fiddle/16hu