Sencha Touch 2 在轮播下方添加导航栏答案

【问题标题】：Sencha Touch 2 Add a Navigation Bar below CarouselSencha Touch 2 在轮播下方添加导航栏
【发布时间】：2012-07-03 19:09:27
【问题描述】：

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

我的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 上的按钮在轮播中的页面之间切换的能力。

【问题讨论】：

标签： sencha-touch-2 carousel navbar

【解决方案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'
            }]
        }]
    }
});

希望这会有所帮助。

【讨论】：

谢谢，但不完全是我想要做的。您有主页，然后是联系页面，联系页面中有一个轮播。我需要一个带有 3 个页面的轮播，以便用户可以在它们之间滑动，同时添加用户使用 tabBar 上的按钮在轮播中的页面之间切换的能力。 -迈克

【解决方案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

【讨论】：