我有一个包含多个项目（标签、轮播、容器等）的视图 -
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);
}
});
根面板包含一个mainPanel项目，该项目又包含几个其他组件（标签和列表）。
问题出在mainPanel. 呈现视图时，即使列表有项目，列表的任何项目都不可见（可能是因为它的高度为零）。在使用配置强制像素高度（例如，200 像素）后，height列表是可见的，但高度应该足够动态，以便即使列表包含 10 个元素，所有元素都是可见的。
我该如何解决？
编辑
这是 SenchaFiddle 的演示。