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