Sencha touch faccia un elenco all'interno di un contenitore visibile

Ho una vista che contiene diversi elementi (etichette, caroselli, contenitori ecc.) –

Ext.define('MyApp.view.MyView', { extend:'Ext.Panel', alias:'widget.view', requires:['Ext.Panel', 'Ext.carousel.Carousel'], config:{ layout:'vbox', cls: 'detail', scrollable:{ direction:'vertical' } }, initialize:function () { var type = { xtype: 'label', id:'type', html:'Type' }; var socialButton = { xtype:'label', id:'socialButton', html:'<div style="position: absolute; right: 0; top: 0px; background: #efefef; border: 1px solid #e5e5e5">' + '<div class="x-button social-button" btnType="fb_icon" style="background: #fff url(resources/images/appimages/facebook.png) no-repeat;"></div>' + '<div class="x-button social-button" btnType="twitter_icon" style="background: #fff url(resources/images/appimages/twitter.png) no-repeat;"></div>' + '<div class="x-button social-button" btnType="google_icon" style="background: #fff url(resources/images/appimages/google.png) no-repeat;"></div>' + '<div class="x-button social-button" btnType="linked_icon" style="background: #fff url(resources/images/appimages/linkedin.png) no-repeat;"></div>' + '</div>' }; if (Ext.os.is.Phone) { socialButton = { xtype:'label', id:'socialButton', html:'<div style="position: absolute; right: 0; top: 0px; background: #efefef; border: 1px solid #e5e5e5">' + '<div class="x-button social-button" btnType="fb_icon" style="background: #fff url(resources/images/appimages/facebook.png) 100% 50% no-repeat;"></div>' + '<div class="x-button social-button" btnType="twitter_icon" style="background: #fff url(resources/images/appimages/twitter.png) 100% 50% no-repeat;"></div>' + '<div class="x-button social-button" btnType="google_icon" style="background: #fff url(resources/images/appimages/google.png) 100% 50% no-repeat;"></div>' + '<div class="x-button social-button" btnType="linked_icon" style="background: #fff url(resources/images/appimages/linkedin.png) 100% 50% no-repeat;"></div>' + '</div>' }; } var titleFont = Ext.os.is.Phone ? 0.7 : 1.2; var title = { xtype:'label', id:'title', html:'title', style:'font-size: ' + titleFont + 'em; font-weight: bold; color: #117BBE; margin-top: 10px;' }; var wFont = Ext.os.is.Phone ? 7 : 8; var w = { xtype:'label', margin:'0 0 0 0', id:'w', html:'wwwww', style:'font-size: ' + wFont + 'pt; color: #117BBE;' }; var tsFont = Ext.os.is.Phone ? 'font-size: 7pt;' : ''; var ts = { xtype:'label', id:'ts', html:'tststst', style:'font-weight: bold;' + tsFont }; var carousel = { xtype:'slideshow', id:'carousel', cls:'carousel', style: 'margin-top: 10px; margin-bottom: 5px;', height: '300px' }; var imageCaption = { xtype:'label', id:'imageCaption', html:'Caption of the image', style:'font-size: 8pt; text-align: center;' }; var mainPanel = { xtype: 'container', layout: 'vbox', items:[ { xtype: 'label', id: 'body', tpl: '{body}' }, { xtype: 'label', id: 'analysis', html: 'analysis' }, { xtype: 'toolbar', title: 'Related' }, { xtype: 'list', // this list is not visible id: 'related', itemTpl: '{title}', listeners: { select: { scope: this, fn: this.onRelatedSelect }, painted: function (list) { //alert(list.element.dom.offsetHeight); } } } ] }; this.add([ type, socialButton, title, w, ts, carousel, imageCaption, mainPanel ]); this.element.on( { swipe:{ scope:this, element:'element', fn:this.onSwipe } }); }, onSwipe:function (event) { this.fireEvent('Swipped', event.direction); }, onRelatedSelect:function (list, record) { return this.fireEvent('relatedSelected', record); } }); 

Il pannello radice contiene un elemento mainPanel , che a sua volta contiene diversi altri componenti (etichette e un elenco).

• Nascondere un button sulla visualizzazione spinta e mostrarlo quando torna alla visualizzazione di elenco
• Sencha Touch - menu e bordi inutilizzano errori
• Dettagli del module di posta elettronica in Sencha Touch che dà exception
• Aggiorna l'elenco dom solo se l'elenco viene visualizzato
• Come posso get l'indicatore sulla posizione corrente nella mappa in Sencha-Touch2.0

Il problema è con l'elenco che si trova all'interno del mainPanel . Quando viene visualizzata la visualizzazione, nessun elemento dell'elenco è visibile (probabilmente a causa della sua altezza è zero) anche se l'elenco contiene elementi. Dopo aver forzato l'altezza di un pixel (ad esempio, 200px) con l' height configuration l'elenco è visibile, ma l'altezza deve essere sufficientemente dynamic in modo che anche se l'elenco contiene 10 elementi tutti sono visibili.

Come posso risolvere questo problema?

EDIT

• come controllare quale tipo di connessione wifi in ipad usando sencha touch2
• Sencha Touch 2: l'intigrazione dei dati o come condividere informazioni dinamiche tra sencha e javascript
• Il caricatore applicativo Sencha touch continua a lampeggiare
• Autenticazione su Sencha Touch e server remoto
• submit e ricevere dati sulla creazione di un nuovo pannello sencha touch

Ecco una dimostrazione su SenchaFiddle.