title: Tabpanel disappears when opening another panel
body: <p>I have a tabpanel which should always be shown at the bottom of the page.</p>
  
  <p>This tabpanel (main.js) has 3 tabs (home, persoon and todo).
  These tabs are "panels" (home.js, persoon.js, todo.js).</p>
  
  <p>Every tab has multiple panels:</p>
  
  <p>Home tab --> home.js, homeOver.js, homeReset.js</p>
  
  <p>Persoon tab --> person.js, personAdd.js, personDetail.js</p>
  
  <p>Todo tab --> todo.js, todoAdd.js, todoDetail.js</p>
  
  <p>When I click at a tab, the correct page will be shown.
  When I click at lets say the home tab, the home panel will be shown. When I click within this panel at a button to show another panel within the same tab (home), the tabpanel disappears.
  How can I resolve this?</p>
  
  <p>I change the page with the following function:</p>
  
  <pre><code>Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
  </code></pre>
  
  <p>Here is my complete code:</p>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>Ext.application({
  name: 'app',
  
  controllers: ['HomeController', 'PersoonController'],
  views: ['Main'],
  
  launch: function() {
      Ext.Viewport.add({
           xclass: 'app.view.Main'
      });
  }
  });
  </code></pre>
  
  <p><strong>app.view.Main.js:</strong></p>
  
  <pre><code>Ext.define('app.view.Main', {
  extend:'Ext.TabPanel',
  xtype: 'maincard',
  
  requires: [
      'app.view.Home',
      'app.view.Persoon',
      'app.view.Todo',
      'app.view.HomeOver',
      'app.view.HomeReset'
  ],
  
  config: {
      tabBar: {
          docked: 'bottom',
          layout: {
              pack: 'center'
          }
      },
      items: [
          { xtype: 'homecard' },
          { xtype: 'persooncard' },
          { xtype: 'todocard' }
      ]
  }
  });
  </code></pre>
  
  <p><strong>app.view.Home.js:</strong> </p>
  
  <pre><code>Ext.define('app.view.Home', {
  extend: 'Ext.Panel',
  alias: "widget.homePage",
  xtype: 'homecard',
  
  config: {
      iconCls: 'home',
      title: 'Home',
      html: 'Dit is de home pagina',
      styleHtmlContent: true,
  
      items: [{
          docked: 'top',
          xtype: 'toolbar',
          title: 'Home',
          items: [
              {
                  xtype: "button",
                  text:    'Over',
                  action: 'ButtonHomeOverClicked'
              },
              {
                  xtype: "spacer"
              },
              {
                  xtype: "button",
                  text:    'Reset',
                  action: 'ButtonHomeResetClicked'
                  //action:
              }
          ]
      }
      ]
  }
  });
  </code></pre>
  
  <p><strong>app.view.HomeOver.js:</strong> </p>
  
  <pre><code>Ext.define('app.view.HomeOver', {
  extend: 'Ext.Panel',
  alias: "widget.homeover",
  xtype: 'homeovercard',
  requires: [
      'app.view.Home',
      'app.view.Persoon',
      'app.view.Todo'
  
  ],
  config: {
      iconCls: 'home',
      title: 'Home',
      html: 'Dit is de home over pagina',
  
      styleHtmlContent: true,
      items: [
          {
              docked: 'top',
              xtype: 'toolbar',
              title: 'Over pagina',
              items: [
              {
                  xtype: "button",
                  ui: "back",
                  text: "Terug",
                  action: "ButtonBackHome"
              }
              ]
          }
      ]
  }
  });
  </code></pre>
  
  <p><strong>app.controller.HomeController:</strong></p>
  
  <pre><code>     Ext.define("app.controller.HomeController", {
  extend: "Ext.app.Controller",
  
  config: {
      refs: {
          // We're going to lookup our views by xtype.
          overButton: "button[action=ButtonHomeOverClicked]",
          resetButton: "button[action=ButtonHomeResetClicked]",
          backButton: "button[action=ButtonBackHome]"
      },
      control: {
          overButton: {
              // The commands fired by the notes list container.
              tap: "onOverCommand"
          },
          resetButton: {
              // The commands fired by the notes list container.
              tap: "onResetCommand"
          },
          backButton: {
              tap: "onBackCommand"
          }
      }
  },
  
  onOverCommand: function () {
      console.log("Op home over knop gedrukt");
      this.changeScreenToOverPage();
  },
  onResetCommand: function () {
      console.log("Op home reset knop gedrukt");
      this.changeScreenToResetPage();
  },
  onBackCommand: function () {
      console.log("Op back knop gedrukt");
      this.changeScreenToHomePage();
  },
  
  
  changeScreenToOverPage: function () {
      console.log("Verander screen!");
      Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
  },
  changeScreenToResetPage: function () {
      console.log("Verander screen!");
      Ext.Viewport.animateActiveItem( { xtype : 'homeresetcard'}, {type: 'slide', direction: 'left'});
  },
  
  changeScreenToHomePage: function () {
      console.log("Verander screen!");
      Ext.Viewport.animateActiveItem( { xtype : 'maincard'}, {type: 'slide', direction: 'right'});
     },
  
  
  // Base Class functions.
     launch: function () {
      this.callParent(arguments);
     // Ext.getStore("Notes").load();
      console.log("launch");
  },
  init: function () {
      this.callParent(arguments);
      console.log("init");
      //this.onOverCommand();
  }
  });
  </code></pre>
  
  <p>I hope my question is clear.</p>
  
  <p>Thanks in advance for your help.</p>