title: Switch View on button click in secha touch 2.4.2
body: <p>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:</p>
  
  <p>first</p>
  
  <pre><code>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'
  
                  }
              ]
          }
  
      ]
    }
  });
  </code></pre>
  
  <p>The important thing here is the Button with the id: 'button1'</p>
  
  <p>The second view:</p>
  
  <pre><code>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'
                          }
                      ]
                  }
              ]
          }
      ]
    }
  
  });
  </code></pre>
  
  <p>and the Controller:</p>
  
  <pre><code>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'
      });
   }
  });                                   
  </code></pre>
  
  <p>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?</p>