[英]Sencha touch make a list inside a container visible
I have a view which contains several items (labels, carousels, container etc.) - 我有一个包含几个项目(标签,轮播,容器等)的视图-
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);
}
});
The root panel contains a mainPanel
item, which in turn contains several other components (labels, and a list). 根面板包含mainPanel
项,而mainPanel
项又包含其他几个组件(标签和列表)。
The problem is with the list that is inside the mainPanel
. 问题出在mainPanel
内部的列表。 When the view is rendered, no items of the list is visible (probably because of its height is zero) even if the list has items. 呈现视图时,即使列表中有项目,列表中的任何项目也不可见(可能是由于其高度为零)。 After forcing a pixel height (eg, 200px) with the height
config the list is visible but the height should be dynamic enough so that even if the list contains 10 elements all of them are visible. 在使用height
config强制设置像素高度(例如200像素)之后,列表是可见的,但高度应足够动态,以便即使列表包含10个元素,所有这些元素也都可见。
How do I fix this? 我该如何解决?
EDIT 编辑
I think you just need to add height: "auto"
to your list 我认为您只需要在列表中添加height: "auto"
Edit: 编辑:
Add scrollable:false
to your list as well 也将scrollable:false
添加到您的列表中
Demo: http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr 演示: http : //www.senchafiddle.com/#yyCVE#GNEuj#1aEQr
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.