Проблема с TabPanel внутри TabPanel Sencha Touch 2

Question

Я создаю приложение sencha touch 2, где у меня есть TabPanel, один из элементов этого снова имеет панель вкладок.

Проблема внутренних вкладок не работает. Представление не обновляется с помощью 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: '' 
      } 
     ] 
    } 
}); 

SenchaFiddle

В основном я просто пытаюсь добавить строку заголовка на домашней странице в this example

Answer 1

Чтобы получить требуемую раскладку,

TabView (Card.js) должны быть типа NavigationView

NavigationView добавляет дополнительную функциональность поверх контейнера, чтобы вы могли в любое время нажать и всплывать. Когда вы это сделаете, ваш NavigationView будет автоматически анимироваться между вашим текущим активным видом и новым представлением, которое вы хотите нажать, или предыдущим видом, который вы хотите поместить.

так карта может быть определена как

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

Это все еще может быть достигнуто с использованием макета контейнера с помощью ниже конфигурации.

config: { 

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