如何添加旋轉木馬內標籤面板 - Sencha觸摸2

Question

我想創建一個菜單視圖，其中將有兩個工具欄和三個旋轉木馬工作表在中間+另一個工具欄在底部有幾個不同的圖標。我用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' 
        } 
       ] 
      } 
     ] 
    } 
}); 

Answer 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' 
     }] 
    }] 
    } 
});