Sencha Touch 2 - 旋轉木馬停留在第一個面板上後生成

Question

我有一個面板中的旋轉木馬顯示和工作正常，然後我通過sencha sdk構建應用程序。但是，在構建完成後，傳送帶仍能正常顯示，但不再允許我在物品之間滑動。

Ext.define('SycsApp.view.HotOffers', { 
    extend: 'Ext.Panel', 
    requires: ['Ext.carousel.Carousel', 'Ext.TitleBar'], 

    config: { 
      layout: 'card', 
      items: [ 
       { 
        docked: 'top', 
        xtype: 'titlebar', 
        ui: 'top-sub', 
        title: 'Hot Offers', 
       }, 
       { 
        id: 'hotOffersCarousel', 
        xtype: 'carousel', 
        width: '100%', 
        items: [ 
         { 
          html : 'Item 1', 
          style: 'background-color: #5E99CC' 
         }, 
         { 
          html : 'Item 2', 
          style: 'background-color: #759E60' 
         }, 
         { 
          html : 'Item 3' 
         } 
        ] 
       } 
      ] 
    } 
}); 

佈局設置爲卡的原因是此視圖是包含選項卡面板的一部分。當我在構建之後運行應用程序時，我沒有從控制檯收到任何錯誤消息。

任何幫助，爲什麼這可能會發生將不勝感激。

Answer 1

該問題是由於它被添加到主卡視圖的方式造成的。

Ext.define('SycsApp.view.Main', { 
extend: 'Ext.tab.Panel', 
xtype: 'mainView', 
requires: ['SycsApp.view.HotOffers'], 

config: { 
    tabBarPosition: 'bottom', 
    id: 'MainView', 
    ui: 'bottom', 
    layout: 'card', 
    items: [ 
     { 
      title: 'Hot Offers', 
      layout: 'fit', 
      iconCls: 'hotoffer', 
      //items: [Ext.create('SycsApp.view.HotOffers')], // carousel doesn't work after build 
      items: [{xtype: 'hotOffersView'}] // carousel works after build 
     }, 
     { 
      title: 'All Savings', 
      layout: 'fit', 
      iconCls: 'list', 
      items: [{xtype: 'allSavingsMainView'}] 
     } 
    ] 
} 

}）;

的xtype: 'hotOffersView'必須被添加到該熱提供視圖：

Ext.define('SycsApp.view.HotOffers', { 
    extend: 'Ext.Panel', 
    xtype: 'hotOffersView', 
    requires: ['Ext.carousel.Carousel', 'Ext.TitleBar'], 

    config: { 
      layout: 'card', 
      items: [ 
       { 
        docked: 'top', 
        xtype: 'titlebar', 
        ui: 'top-sub', 
        title: 'Hot Offers', 
       }, 
       { 
        id: 'hotOffersCarousel', 
        xtype: 'carousel', 
        width: '100%', 
        items: [ 
         { 
          html : 'Item 1', 
          style: 'background-color: #5E99CC' 
         }, 
         { 
          html : 'Item 2', 
          style: 'background-color: #759E60' 
         }, 
         { 
          html : 'Item 3' 
         } 
        ] 
       } 
      ] 
    } 
});