sencha-touch-2 - TabPanel Sencha Touch 2 内で TabPanel を表示する際の問題

Question

私は sencha touch 2 アプリケーションを作成しています。TabPanel の項目の 1 つに再びタブ パネルがあります。

問題は、内側のタブが機能していないことです。クリックしたタブの html でビューが更新されません。

メインビュー（Main.js）は次のようになります。

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: ''
          }
       ]
    }
}); 

煎茶フィドル

基本的に、この例ではホームページにタイトルバーを追加しようとしています