ナビゲーションビューでアイテムが正しくレンダリングされない

Question

ビューが正しくレンダリングされません。それはボタンを表示するだけです。私はここで間違って何をしていますか？ 'テスト'、 アイテム：[ {XTYPE：

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'、{ タイトル試み 'コンテナー' を タイトル： '試験'、 スクロール可能な '垂直'、 項目：[カルーセル、情報] }

Answer 1

はあなたのコードを持ついくつかの問題があります。

1. Ext.Carouselは、storeの設定をサポートしていません。あなたはこれを行う方法を学ぶことができますhere。

2. ナビゲーションビューで指定されたitemsは、アイテムがリリースされたときの最初のstackです。したがって、3つのアイテムを入れると、最後のアイテムが表示され、Backボタンが表示されます。戻るボタンを押すと、最後のアイテムが削除され、itemsのスタックに2つのアイテムが表示されます。

3. おそらくExt.ButtonをNavigationViewの中に配置しないでください。これを行うと、ボタンが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); 
    } 
});