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'  
          } 
         ] 
         } 
        ] 
   }