Sencha Touch 2のリストはコンテナ内に見えません

Question

コンテナのリストを使って簡単なビューを作成しようとしていますが、いくつか問題があります。 まず第一に、私はこのようにそれをやろうとしているときに、リストが表示されていない：

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

が、それはこのように書かれています：

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

それが動作します。

問題は、navigation.Viewの拡張で書き込むと、上に2つのツールバーが表示され、2番目のツールバーを無効にするという解決策が見つからないということです。

全コード：

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

あなたのコンテナにレイアウトとフレックスプロパティを与える必要があります。フレックスはスクロールしてから視認可能な高さを持たないため、リスト上で重要です。あなたのコードにいくつかのプロパティを追加しました。お役に立てれば。

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