탐색보기에서 항목이 올바르게 렌더링되지 않습니다.

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