導航視圖不能正確呈現項目

Question

視圖無法正確呈現。它只顯示按鈕。我在這裏做錯了什麼？

Ext.application({ 
    name: 'App',  
    models: ['Picture'], 
    stores: ['Pictures'], 
    views: ['Picture'], 

    requires: [ 
     'Ext.carousel.Carousel', 
     'Ext.data.proxy.JsonP' 
    ], 

    launch: function() { 
     var titleVisible = false, 
      info, carousel; 


     carousel = Ext.create('Ext.Carousel', { 

      store: 'Pictures', 
      direction: 'horizontal', 
      listeners: { 
       activeitemchange: function(carousel, item) { 
        info.setHtml(item.getPicture().get('title')); 
       } 
      } 
     }); 


     info = Ext.create('Ext.Component', { 
      cls: 'apod-title', 
      top: '50', 
      left: 0, 
      right: 0 
     }); 

     var view = Ext.create('Ext.NavigationView', { 
     title:'Paramore', 
     items: [carousel,info,{xtype:'button',text:'help'}] 

     }); 


     Ext.Viewport.add(view); 

    --- some code ----   

     }); 


    } 
}); 

.I也試過這種

VAR視圖= Ext.create（ 'Ext.NavigationView'，{ 標題： '測試'， 項目：[ { 的xtype： '容器'， 標題： '測試'， 滾動： '垂直'， 項目：旋轉木馬，信息] }

Answer 1

有你的代碼的幾個問題：

1. Ext.Carousel不支持store配置。你可以學習如何做到這一點here。

2. 導航視圖中指定的items是發佈時項目的初始stack。因此，如果您放入3件商品，最後一件商品將會顯示，並且按鈕將會顯示。當您按下後退按鈕時，它將刪除最後一個項目，並且items堆棧中將有2個項目。

3. 你可能不應該直接在一個NavigationView中放置一個Ext.Button。這樣做會使按鈕拉伸到NavigationView的大小，使它看起來很糟糕。

如果您從旋轉木馬刪除提及一個store和listeners，你的榜樣按預期工作。這是我用來使它工作的代碼。我剛剛評論了破碎的代碼：

Ext.application({ 
    name: 'App', 
    // models: ['Picture'], 
    // stores: ['Pictures'], 
    // views: ['Picture'], 
    requires: ['Ext.carousel.Carousel', 'Ext.data.proxy.JsonP'], 

    launch: function() { 
     var titleVisible = false, 
      info, carousel; 

     carousel = Ext.create('Ext.Carousel', { 
      // store: 'Pictures', 
      direction: 'horizontal', 
      items: [{ 
       html: 'one' 
      }, { 
       html: 'two' 
      }, { 
       html: 'three' 
      }] 
      // listeners: { 
      //  activeitemchange: function(carousel, item) { 
      //   // info.setHtml(item.getPicture().get('title')); 
      //  } 
      // } 
     }); 

     info = Ext.create('Ext.Component', { 
      cls: 'apod-title', 
      top: '50', 
      left: 0, 
      right: 0 
     }); 

     var view = Ext.create('Ext.NavigationView', { 
      title: 'Paramore', 
      items: [carousel, info, 
      { 
       xtype: 'button', 
       text: 'help' 
      }] 
     }); 

     Ext.Viewport.add(view); 
    } 
});