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