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).

• Sencha Touch - menu e bordi inutilizzano errori
• Navigazione Vista Sencha Touch 2
• Sencha Touch 2: Ext.Msg.show e toccare ovunque per hide
• Aggiorna l'elenco dom solo se l'elenco viene visualizzato
• Istruci gli strumenti SDK Sencha per associare altri file js specificati in app.json

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

• Autenticazione su Sencha Touch e server remoto
• Sencha 2.x MVC: Ottieni elemento da id
• Sencha Touch 2 performance android
• Imansible call il metodo 'substring' di app.js non definito: 1 sencha nested
• Sencha Touch 2: toccare il messaggio Ext.Msg. che non ha pulsanti

Ecco una dimostrazione su SenchaFiddle.