sencha-touch-2 - 在 TabPanel Sencha Touch 2 中无法显示 TabPanel

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

基本上我只是想在这个例子中的主页上添加一个标题栏

Answer 1

要获得所需的布局，

Tabview( Card.js ) 应该是NavigationView类型

NavigationView 在 Container 之上添加了额外的功能，允许您随时推送和弹出视图。当你这样做时，你的 NavigationView 将自动在你当前的活动视图和你想要推送的新视图或你想要弹出的前一个视图之间进行动画处理。

所以 Card 可以定义为

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

它仍然可以通过使用以下配置使用容器布局来实现。

config: {

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