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

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

Ecco una dimostrazione su SenchaFiddle.

Penso che basta aggiungere height: "auto" alla tua list

Edit:

Aggiungi scrollable:false alla tua list

Demo: http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr