如何在选项卡面板中添加轮播 - Sencha Touch 2答案

【问题标题】：How to add Carousel inside Tab Panel - Sencha Touch 2如何在选项卡面板中添加轮播 - Sencha Touch 2
【发布时间】：2013-09-21 13:09:53
【问题描述】：

我正在尝试创建一个菜单视图，其中上面有两个工具栏，中间有三个轮播表+底部有另一个工具栏，有几个不同的图标。我使用了 Ext.tab.Panel，我尝试在其中添加三个轮播表，以便可以交换并查看菜单。我无法将轮播添加到我的标签面板中。我尝试了很多但没有结果。这是我所做的。

Ext.define('GS.view.Home', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: ['Ext.TitleBar', 'Ext.Carousel'],
    config: {
        fullscreen: true,
        scrollable: 'vertical', 
        defaults: {flex: 1},        
        tabBarPosition: 'bottom',
        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Mobile App'
                },
                items:[
                    {
                        xtype: 'carousel',
                        direction: 'horizontal',

                        items: [
                            {
                                xtype: 'tabpanel',
                                styleHtmlContent: true,
                                style: 'background-color: black',   
                            },
                            {
                                xtype: 'tabpanel',
                                styleHtmlContent: true,
                                style: 'background-color: orange',  
                            },
                        ],
                    }
                ]
            },
            {
                title: 'Get Started',
                iconCls: 'action',
                items: [
                    {
                        docked: 'bottom',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?                        token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

【问题讨论】：

标签： extjs sencha-touch sencha-touch-2

【解决方案1】：

“items”属性与第一个选项卡（“Welcome”）重复，这是不正确的定义，应该只有一个。

Ext.define('GS.view.Home', {
  extend: 'Ext.tab.Panel',
  xtype: 'main',
  requires: ['Ext.TitleBar', 'Ext.Carousel'],
  config: {
    fullscreen: true,
    scrollable: 'vertical', 
    tabBarPosition: 'bottom',
    items: [ {
        docked: 'top',
        xtype: 'titlebar',
        title: 'Mobile App'
    },{
        title: 'Welcome',
        iconCls: 'home',
        xtype: 'carousel',
        direction: 'horizontal',
        defaults: {
            xtype: 'tabpanel',
            styleHtmlContent: true
        },
        items: [{
            style: 'background-color: black',   
        },{
            style: 'background-color: orange',  
        }]
    },{
        title: 'Get Started',
        iconCls: 'action',
        items: [{
            docked: 'bottom',
            xtype: 'titlebar',
            title: 'Getting Started'
        },{
            xtype: 'video',
            url: 'http://av.vimeo.com/64284/137/87347327.mp4?                        token=1330978144_f9b698fea38cd408d52a2393240c896c',
            posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
        }]
    }]
  }
});

【讨论】：