Sencha Touch 2 목록이 컨테이너에 보이지 않습니다.

Question

컨테이너에있는 목록과 함께 간단한보기를 작성하려고하지만 몇 가지 문제가 있습니다. 모든 첫째, 목록은 내가 이런 식으로 그것을 할 노력하고있어 사용하지 않을 때는 볼 수 있습니다 :

Ext.define('App.view.News', { 
    extend: 'Ext.Container', 

를하지만이 같은 기록 된 때 :

Ext.define('App.view.News', { 
    extend: 'Ext.navigation.View', 

그것을 작동합니다.

문제점은 navigation.View의 확장으로 작성했을 때 맨 위에 두 개의 도구 모음이 표시되고 목록에서 추가 된 두 번째 도구 모음을 사용하지 못하게하는 해결책을 찾을 수 없다는 것입니다.

전체 코드 :

Ext.define('App.view.News', { 
    extend: 'Ext.Container', //Ext.navigation.View 
    xtype: 'news', 
    requires: [ 
     'Ext.dataview.List', 
     'Ext.data.proxy.JsonP', 
     'Ext.data.Store' 
    ], 
    config: { 
     style: ' background-color:white;', 

     items: 
     [ 
      { 
       xtype: 'toolbar', 
       docked: 'top', 
       title: 'News', 
       minHeight: '60px', 
       items: [ 
        { 
         ui: 'back', 
         xtype: 'button', 
         id: 'backButton', 
         text: 'Back', 
        }, 

        { 
         minHeight: '60px', 
         right: '5px', 
         html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""), 
        }, 
       ],   
      }, 

      { 
       xtype: 'list', 
       itemTpl: '{title},{author}', 
       store: { 
        autoLoad: true, 
        fields : ['title', 'author'], 
        proxy: { 
         type: 'jsonp', 
         url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog', 
         reader: { 
          type: 'json', 
          rootProperty: 'responseData.feed.entries' 
         } 
        } 
       } 
      } 
     ] 
    } 
}); 

도와주세요!

Answer 1

컨테이너에 레이아웃을 지정하고 목록에 flex 속성을 지정해야합니다. 플렉스는 스크롤 할 때 볼 수있는 높이가 없으므로 목록에서 중요합니다. 아래에 코드에 몇 가지 속성을 추가했습니다. 희망이 도움이됩니다.

Ext.define('App.view.News', { 
    extend: 'Ext.Container', //Ext.navigation.View 
    xtype: 'news', 
    requires: [ 
     'Ext.dataview.List', 
     'Ext.data.proxy.JsonP', 
     'Ext.data.Store' 
    ], 
    config: { 
     style: ' background-color:white;', 
     layout: 'vbox', // add a layout 
     items: 
     [ 
      { 
       xtype: 'toolbar', 
       docked: 'top', 
       title: 'News', 
       minHeight: '60px', 
       items: [ 
        { 
         ui: 'back', 
         xtype: 'button', 
         id: 'backButton', 
         text: 'Back', 
        }, 

        { 
         minHeight: '60px', 
         right: '5px', 
         html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""), 
        }, 
       ],   
      }, 

      { 
       xtype: 'list', 
       itemTpl: '{title},{author}', 
       flex: 1, // add a flex property 
       store: { 
        autoLoad: true, 
        fields : ['title', 'author'], 
        proxy: { 
         type: 'jsonp', 
         url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog', 
         reader: { 
          type: 'json', 
          rootProperty: 'responseData.feed.entries' 
         } 
        } 
       } 
      } 
     ] 
    } 
});