Trouble showing TabPanel inside TabPanel Sencha Touch 2

Question

I am creating a sencha touch 2 application where I have TabPanel one of the items of this again has a tab panel.

Problem is inner tabs are not working. The view is not getting updated with the html of the clicked tab.

Main view(Main.js) looks like,

Ext.define('FirstApp.view.Main', {
    extend: 'Ext.TabPanel',
    xtype: 'main',    
    requires: [
        'Ext.TitleBar',
        'FirstApp.view.mypages.Card'    
      ],
    config: {              
        tabBarPosition: 'bottom',
        items: [
            {xtype:'mypagescard'},                        
            {
              title: 'Tab 2',
              iconCls: 'action',
              items: [
                  {
                      docked: 'top',
                      xtype: 'titlebar',
                      title: 'Tab 3'
                  }
              ]
           },             
            {
              title : 'Tab 3',
              iconCls: 'user',
              items: [
                   {
                       docked: 'top',
                       xtype: 'titlebar',
                       title: 'Tab 3'
                   }
               ]
            }
        ]
    }
});

Card.js

Ext.define('FirstApp.view.mypages.Card', {
    extend: 'Ext.Panel',
    xtype: 'mypagescard',
    requires : [
        'FirstApp.view.mypages.Tabs'    
    ],
    config: {
        iconCls: 'home',
        title: 'Tab 1',
        html: 'placeholder text',
        styleHtmlContent: true,
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Tab 1'
        },
        {
          xtype : 'mypagestabs'
        }
      ]
    }   
});

Tab.js

Ext.define('FirstApp.view.mypages.Tabs', {
    extend: 'Ext.TabPanel',
    xtype: 'mypagestabs',
    requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
    config: {
        ui: 'light',
        tabBar: {
            layout: {
                pack: 'center'
            }
        },
        activeTab: 1,
        defaults: {
            scrollable: true,
            styleHtmlContent: true

        },               
        items: [
          {            
              title: 'Sub tab 1',
              items: [ {
                  xtype: 'list',
                  title: 'Sample',
                  itemTpl: '{title}',
                  data: [{
                      title: 'Item 1'
                  }]
              }]
          },        
          {
              title: 'Sub tab 2',
              html: ''
          }
       ]
    }
}); 

SenchaFiddle

Basically I am just trying to add a title bar on the homepage in this example

Answer 1

To get the required layout,

Tabview(Card.js) should be of type NavigationView

NavigationView adds extra functionality on top of Container to allow you to push and pop views at any time. When you do this, your NavigationView will automatically animate between your current active view, and the new view you want to push, or the previous view you want to pop.

so Card can be defined as

Ext.define('FirstApp.view.mypages.Card', {
    extend: 'Ext.NavigationView'
})

It can still be achieved using Container layout by using below configuration.

config: {

        layout: {
            type: 'card',
            animation: {
                type: 'slide',
                direction: 'left',
                duration: 250
            }
        }
}