extjs - Sencha Touch Carousel 和 TabPanel

Question

我想要一个带有 TabPanel 的视图，并在带有两张卡片的 Carousel 内查看。

像这样：

var view = Ext.define("abril16.view.Main2", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar', 'Ext.carousel.Carousel'],
config: {
    tabBarPosition: 'bottom', 
    items: [{
        title: 'Home',
        iconCls: 'home',
        styleHtmlContent: true,
        scrollable: true,
        layout: 'fit',
        flex: 1,
        items: {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Beetoom',
        },
    },
    {
        title: 'Discover',
        iconCls: 'action',
        scrollable: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Select',
            layout: 'fit',
            flex: 1,
        }, 
        {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Discover',
        },
        {
            xtype: 'carousel',
            items: [{   
                            xtype: 'checkboxfield',
                            name: 'Hola',
                            label: 'Hola'
                        },
                        {
                            xtype: 'checkboxfield',
                            name: 'Action',
                            label: 'Adventure'
                        }
                    ]
                }

                ]
    }
        ]
    }

            });

问题是这里什么都没有发生。没有语法错误，但没有显示布局，而是轮播我在面板内有一个空白背景。

非常感谢。

Answer 1

我测试了你的代码。这是我从您的代码中观察到的。

1. 为什么你['Select','Discover']的第二个标签需要两个标题栏'Discover'。我认为，您在标签中添加了两次标题栏'Discover'。同一个标签有两个标题栏绝对没有意义。

2. 包括这样的发现标签代码，

    {
           title: 'Discover',
           iconCls: 'action',
           styleHtmlContent:true,
           layout:'card',
           items: [
               {
                   docked: 'top',
                   xtype: 'titlebar',
                   title: 'Discover',
               },
               {
               xtype: 'carousel',
               items: [
                   {   
                     xtype: 'checkboxfield',
                     name: 'Hola',
                     label: 'Hola'     
                   },
                   {
                      xtype:'checkboxfield',
                      name:'Action',
                      label:'Adventure'    
                   }
                ]
             }
           ]
    }