显示TabPanel在TabPanel Sencha 2中的问题

Question

我正在创建一个感应器触摸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在容器之上添加了额外的功能，允许您在任何时候推送和弹出视图。当您这样做时，您的NavigationView将自动在您当前的活动视图与您想要推送的新视图之间，或者在您想要弹出的前一个视图之间进行动画。

所以卡片可以定义为

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

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

config: {

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