title: Show/hide a toolbar with slide animation in Sencha Touch
body: <p>I have a toolbar docked to the top of the main viewport, and a panel with card layout below. The idea is to have the toolbar slide down from the top upon touching a button, and slide back up when dismissed. It should not overlay the content below it, everything below it should slide down as well to make room for the toolbar.</p>
  
  <p><strong>Firstly</strong>, how can I animate the toolbar show/hide with a slide transition? This is how I am showing/hiding the toolbar at the moment:</p>
  
  <pre><code>toggleMenu:function(){
      if (tkwine.views.menu.hidden){
          tkwine.views.menu.show();
      }else{
          tkwine.views.menu.hide();
      }
  
      //force the viewport to lay itself out again after toolbar hide/show 
      tkwine.viewport.doComponentLayout();
  }
  </code></pre>
  
  <p><strong>Secondly</strong>, this seems to work fine once, but after showing and hiding the toolbar once, the second time I attempt to show it, the toolbar overlays the content below instead of pushing it down. Why would this be?</p>
  
  <p>This is my viewport if it might help debug the second issue:</p>
  
  <pre><code>tkwine.views.Viewport = Ext.extend(Ext.Panel, {
      id: 'viewport',
      layout: 'card',
      cardSwitchAnimation: 'slide',
      fullscreen: true,
  
      initComponent: function() {
  
          //put instances of cards into app.views namespace
          Ext.apply(tkwine.views, {
              menu: new tkwine.views.Menu(),
              home: new tkwine.views.Home(),
              trailsList: new tkwine.views.TrailsList(),
              trailDetail: new tkwine.views.TrailDetail(),
              createTrail: new tkwine.views.CreateTrail()
          });
  
          Ext.apply(tkwine.controllers, {
              historyManager: new tkwine.controllers.HistoryManager(tkwine.views.home)
          });
  
          Ext.apply(this, {
              dockedItems: [tkwine.views.menu],
              items: [
                  tkwine.views.home,
                  tkwine.views.trailsList,
                  tkwine.views.trailDetail,
                  tkwine.views.createTrail,
              ],
          });
  
          tkwine.views.Viewport.superclass.initComponent.apply(this, arguments);
      }
  });
  </code></pre>
  
  <p>and my toolbar:</p>
  
  <pre><code>tkwine.views.Menu = Ext.extend(Ext.Toolbar, {
      hidden: true,
      overlay: false,
      layout: {
          pack: 'center',
      },
  
      defaults:{
          ui: 'plain',
          iconMask: true,
      },
  
      initComponent: function() {
          Ext.apply(this, {
              items:[
                  {
                      iconCls: 'toolBarIconExplore',
                      handler:function(button, event){
                          Ext.dispatch({
                            controller: tkwine.controllers.controller,
                            action: 'showWineTrails',
                          });
                      }
                  },
                  {
                      xtype: 'spacer',
                  },
                  {
                      iconCls: 'toolBarIconCreate',
                      handler:function(button, event){
                          Ext.dispatch({
                            controller: tkwine.controllers.controller,
                            action: 'showCreateTrail',
                          });
                      }
                  },
                  {
                      xtype: 'spacer',
                  },
                  {
                      iconCls: 'toolBarIconItineraries',
                      handler:function(button, event){
                      }
                  },
                  {
                      xtype: 'spacer',
                  },
                  {
                      iconCls: 'toolBarIconCellar',
                      handler:function(button, event){
                      }
                  },
                  {
                      xtype: 'spacer',
                  },
                  {
                      iconCls: 'toolBarIconAction',
                      handler:function(button, event){
                      }
                  }
              ],
          });
  
          tkwine.views.Menu.superclass.initComponent.apply(this, arguments);
      },
  
  });
  
  Ext.reg('menu', tkwine.views.Menu);
  </code></pre>