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