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

Posted 2023-02-25

【中文标题】Sencha Touch 2 在轮播下方添加导航栏

【英文标题】：Sencha Touch 2 Add a Navigation Bar below Carousel

【发布时间】：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 上的按钮在轮播中的页面之间切换的能力。

【参考方案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