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在Container之上添加了额外的功能，允许您随时推送和弹出视图。执行此操作时，NavigationView将在您当前的活动视图和要推送的新视图或您要弹出的上一个视图之间自动设置动画。

所以卡可以定义为

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

通过使用以下配置，仍然可以使用Container布局实现。

config: {

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

无法在TabPanel Sencha Touch 2中显示TabPanel

1 个答案: