Sencha Touch 2 lista es invisible en el contenedor

Question

Estoy tratando de escribir una vista simple con la lista en el contenedor, pero tengo algunos problemas. En primer lugar, la lista no es visible cuando estoy tratando de hacerlo de esta manera:

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

pero cuando se escribe así:

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

funciona.

El problema es que cuando lo escribo con extended of navigation.View, obtengo dos barras de herramientas en la parte superior y no puedo encontrar la solución para desactivar la segunda (agregada por la lista).

código completo:

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

Ayuda por favor!

Answer 1

Necesita darle a su contenedor un diseño y su lista una propiedad flexible. La flexión es importante en las listas ya que no tienen una altura visible desde que se desplazan. Agregué un par de propiedades a su código a continuación. Espero que esto ayude.

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