title: Sencha Touch TabBar + page navigation. Why it's breaking?
body: <p>I'm a <em>newbie</em> to SenchaTouch. I have started working on an App and the results are this until now: <a href="http://mobz.com.br:86" rel="nofollow">http://mobz.com.br:86</a>. (based on the <a href="https://github.com/nelstrom/Sencha-Touch-tabs-and-toolbars-demo" rel="nofollow">Sencha-Touch-tabs-and-toolbars-demo</a>)</p>
  
  <p>Now I started playing with it and I have difficulties to set things strait in my head.
  I have lot of JQuery experience, but regarding the design of this library, the coin haven't dropped yet.</p>
  
  <p>I got a TabPanel with 5 sections. I will focus only in one section cause there where my problem is.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p><a href="http://mobz.com.br:86/" rel="nofollow">As you can see in my app</a>, when one clicks an item of ingressos (tickets in English), the app loads the second panel, but load it with bugs.</p>
  
  <p>It loads it without the title bar, without the Back button, and also add an empty sixth button on the right.  </p>
  
  <p>But if I load the second panel first, when the page loads, it loads without any UI issues.</p>
  
  <p><strong>My Code</strong></p>
  
  <p>First I declare my <strong>ViewPort</strong></p>
  
  <pre><code>Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
      fullscreen: true,
      initComponent: function() {
          Ext.apply(this, {
              tabBar: {
                  dock: 'bottom',
                  layout: {
                      pack: 'center'
                  }
              },
              items: [
                  { xtype: 'destaques', id: 'home' },
                  { xtype: 'ingressos' },
                  { xtype: 'mobilizacoes' },
                  { xtype: 'locais' },
                  { xtype: 'minhaconta' }
              ]
          });
          Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
      }
  });
  </code></pre>
  
  <p>Than after, at the <em>ingressos.js</em> file, <strong>I define the tab</strong>.</p>
  
  <p>First I got the panel that will load the items into it.</p>
  
  <pre><code>Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
      id: "ingressos",
      title: "Ingressos", //title of the page
      iconCls: "arrow_right", // icon of the tab at the bottom
      styleHtmlContent: true,
      fullscreen: true,
      layout: 'card',
      initComponent: function () {
          Ext.apply(this, {
              dockedItems: [{
                  xtype: "toolbar",
                  title: "Ingressos"
              }],
              items: [Mobz.views.IngressosList]
          });
          Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
      }
  });
  Ext.reg('ingressos', Mobz.views.Ingressos);
  </code></pre>
  
  <p>This is the <strong>initial item</strong> that load into the panel.</p>
  
  <pre><code>Mobz.views.IngressosList = new Ext.List({
      id: 'ingressoslist',
      itemTpl: IngressosList_Template,
      store: Mobz.stores.IngressosStore,
      onItemTap: function (subIdx) {
          //Mobz.views.IngressoCinemaList.update(subIdx);
          Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
      }
  });
  </code></pre>
  
  <p><strong>And that's the second panel.</strong> </p>
  
  <p>The panel where the first panel goes to.</p>
  
  <pre><code>Mobz.views.IngressoTitle = new Ext.Panel({
      id: 'ingressotitle',
      tpl: IngressoTitle_Template,
      data: Mobz.stores.IngressoTitle_Store
  });
  Mobz.views.IngressoCinemaList = new Ext.List({
      id: 'ingressocinemalist',
      itemTpl: IngressoCinemaList_Template,
      store: Mobz.stores.IngressoCinemaListStore,
      flex: 1, grouped: true,
      dockedItems: [{
              xtype: 'toolbar',
              items: [{
                  text: 'Back',
                  ui: 'back',
                  handler: function () {
                      Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
                  }
              }]
          }
      ],
      onItemDisclosure: function () {
          app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
      }
  });
  Mobz.views.Ingresso = new Ext.Panel({
      id: 'ingresso',
      layout: {
          type: 'vbox',
          align: 'fit'
      },
      items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
  });
  </code></pre>
  
  <p>That's it.</p>
  
  <p>I hope some of you guys will have the patient to read all my code examples. I'll appreciate any help.</p>
  
  <p>Shlomi.</p>