Question

我使用此链接开始使用Sencha：http://www.sencha.com/learn/getting-started-with-sencha-touch-2/

My Main.js如下：

Ext.define("epiduo_ped.view.Main", 
{
    extend: 'Ext.Carousel',
    requires: 
    [
        'Ext.TitleBar',
        'Ext.Video'
    ],

    config: 
    {
        tabBarPosition: 'bottom',

        items: 
        [
           {
             xtype:   'homepanel'

           },
           {
             xtype:   'page1panel'
           }
        ]
    }
});

我修改了我的页面以扩展Ext.Carousel而不是Ext.Panel。这有点允许滑动，但是，现在我的底部没有导航栏，按钮可以在页面之间切换，这是有道理的，因为我不再扩展Ext.tab.panel了。在Sencha中是否有内置的方法可以同时使用或者是这个自定义我需要添加自己的html来在底部添加导航栏？无论哪种方式，我都不确定如何做到这一点。换句话说：我需要一个3页的旋转木马，这样用户可以在它们之间滑动，同时添加用户使用tabBar上的按钮在旋转木马中切换页面的能力。

Answer 1

只需保留您的Ext.tab.Panel并在其中添加轮播：

Ext.define("epiduo_ped.view.Main", 
{
    extend: 'Ext.tab.Panel',
    requires: 
    [
        'Ext.TitleBar',
        'Ext.Video'
    ],

    config: 
    {
        tabBarPosition: 'bottom',
        fullscreen: true,

        items: [{
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },{
            title: 'Contact',
            iconCls: 'user',
            xtype:'carousel',
            items: [{
                html : 'Item 1',
            },{
                html : 'Item 2',
            },{
                html : 'Item 3'
            }]
        }]
    }
});

希望这有帮助。

Answer 2

好的，我想为其他任何正在努力完成这项任务的人发布答案。基本上它是一个带有工具栏的旋转木马停靠在底部：

http://www.sencha.com/forum/showthread.php?228733-Control-Carousel-with-Tabbar&s=3e485e109a9b06e351a1429469603273

您只需要使用Sencha“主题”

来设置工具栏和图标的样式

http://docs.sencha.com/touch/2-0/#!/guide/theming

Sencha Touch 2在Carousel下方添加导航栏

2 个答案: