title: How to switch a view container using Sencha Touch?
body: <p>How do I switch views in Sencha Touch? Currently I have a new view being shown, but it looks like it overlays onto the existing one. I think I need to hide the previous or destroy it.  I was thinking of maybe using <code>Ext.getCmp("noteslist")</code> but this returns 'undefined' when trying to get the current container.  Is this the recommended way of navigating between views or is there a better way?</p>
  
  <p>App</p>
  
  <pre><code>Ext.application({
      name: "NotesApp",
      controllers: ["NotesController", "TestController"],
      views: ["NotesListContainer"],
  
      launch: function () {
  
          var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
          Ext.Viewport.add(notesListContainer);
      }
  });
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>Ext.define("NotesApp.controller.NotesController", {
      extend: "Ext.app.Controller",
      views: [        
          "TestListContainer"
      ],
      config: {
          refs: {
              newNoteBtn: "#new-note-btn",
              saveNoteBtn: "#save-note-btn",
          },
          control: {
              newNoteBtn: {
                  tap: "onNewNote"
              },          
              saveNoteBtn: {
                  tap: "onSaveNote"
              }
          }
      },
      onNewNote: function () {
          console.log("onNewNote");
      },
      onSaveNote: function () {
          console.log("onSaveNote");      
          Ext.Viewport.add({xtype:'testlist'}).show();    
              // How do I remove the current one?....         
      },
      launch: function () {
          this.callParent();
          console.log("launch");
      },
      init: function () {
          this.callParent();
          console.log("init");
      }
  });
  </code></pre>
  
  <p>View</p>
  
  <pre><code>Ext.define("NotesApp.view.NotesListContainer", {
      extend: "Ext.Container",   
      config: {
          items: [{
              xtype: "toolbar",
              docked: "top",
              title: "My Notes",
              items: [{
                  xtype: "spacer"
              }, {
                  xtype: "button",
                  text: "New",
                  ui: "action",
                  id:"new-note-btn"
              }, {
                  xtype: "button",
                  text: "Save",
                  ui: "action",
                  id:"save-note-btn"
              }]
          }]
      }
  </code></pre>