title: How to add an item to a TabPanel in a Panel with Sencha Touch 1?
body: <p>I have the following code, which generates a basic layout for my app:</p>
  
  <pre><code>tabpanel = new Ext.TabPanel({
      fullscreen: false,
      ui        : 'dark',
      sortable  : false,
      tabBarDock: 'bottom',
      cardSwitchAnimation: 'flip',
      items: [{
              title: 'Tab 1',
              html : '1',
              cls  : 'card1',
              icon : 'tab1'
      }]
  });
  
  lists.views.Viewport = Ext.extend(Ext.Panel,{
      fullscreen: true,
      layout: 'fit',
      dockedItems: [{
          xtype: 'toolbar',
          dock: "top",
          title: 'title'
      }],
      items: [tabpanel],
      initComponent: function() {
          this.tabpanel.add(new lists.views.ItemLists());
          lists.views.Viewport.superclass.initComponent.apply(this, arguments);
      },
  });
  </code></pre>
  
  <p>This doesn't work, probably due to the fact that the TabPanel that is inside the Viewport Panel cannot be pointed to like this. I've searched through the sencha documentation but I can't find how to add the </p>
  
  <blockquote>
    <p>new lists.views.ItemLists()</p>
  </blockquote>
  
  <p>to the tabpanel, which in turn is inside the</p>
  
  <blockquote>
    <p>lists.views.Viewport</p>
  </blockquote>
  
  <p>Also, there will be other stuff I want to declare before my viewport (or even after it) that I want to add to specific other panels I might add later. What is the best way to achieve this?</p>
  
  <p>Any ideas on how to do this?
  Thanks!</p>