title: Sencha Touch 2 Add a Navigation Bar below Carousel
body: <p>I used this link to get started with Sencha: <a href="http://www.sencha.com/learn/getting-started-with-sencha-touch-2/" rel="nofollow">http://www.sencha.com/learn/getting-started-with-sencha-touch-2/</a></p>
  
  <p>My Main.js is as follows:</p>
  
  <pre><code>Ext.define("epiduo_ped.view.Main", 
  {
      extend: 'Ext.Carousel',
      requires: 
      [
          'Ext.TitleBar',
          'Ext.Video'
      ],
  
      config: 
      {
          tabBarPosition: 'bottom',
  
          items: 
          [
             {
               xtype:   'homepanel'
  
             },
             {
               xtype:   'page1panel'
             }
          ]
      }
  });
  </code></pre>
  
  <p>I modified my pages to extend Ext.Carousel instead of Ext.Panel. This worked as far as allowing swiping, however, now I don't have a nav bar on the bottom with buttons to toggle between the pages, which makes sense because I'm not extending Ext.tab.panel anymore. Is there a built in way in Sencha to have both or is this custom where I have to add my own html to add a nav bar on the bottom? Either way I'm not sure how to do this.
  In other words:  I need a carousel with 3 pages so the user can swipe between them AND at the same time add the ability for the user to use buttons on the tabBar to toggle between the pages in the carousel.</p>