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