Sencha Touch List未显示(再次!) [英] Sencha Touch list not displaying (again!)
本文介绍了Sencha Touch List未显示(再次!)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的Sencha Touch列表没有显示。我所做的只是将根容器更改为导航视图,以便可以将其他视图推到该容器上,但是导航不喜欢将‘fit’作为根。所以我把它移到了另一个类型为‘Fit’的容器中。但是,现在列表不显示了?!
见下图:
Ext.define('MyApp.view.inbox.MyInbox', {
extend: 'Ext.navigation.View',
alias: 'widget.myinboxview',
requires: [
'Ext.navigation.View'
],
config: {
title: 'My Inbox',
xtype: 'card',
items: [
{
xtype: 'container',
type: 'vbox',
items: [
{
xtype: 'container',
flex: 1,
items: [
{
xtype: 'container',
margin: 10,
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
html: 'You have sent'
},
{
xtype: 'label',
html: '0 enquiry',
right: 0
}
]
},
{
xtype: 'container',
margin: 10,
cls: 'linesAboveBelow',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
html: 'You have'
},
{
xtype: 'label',
html: '1 unread response',
right: 0
}
]
}
]
},
{
xtype: 'container',
flex: 5,
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
store: 'theInboxEnquiryStore',
itemTpl: [
'<div>Date: { CreationDate }</div>'
]
}
]
}
]
}
]
}
});
推荐答案
我已修改您的布局代码。Here is a fiddle for it.
Ext.define('MyApp.view.inbox.MyInbox', {
extend: 'Ext.navigation.View',
alias: 'widget.myinboxview',
requires: ['Ext.navigation.View'],
config: {
title: 'My Inbox',
fullscreen: true,
items: [{
xtype: 'container',
layout: 'vbox',
title: 'My Inbox',
items: [{
xtype: 'container',
items: [{
xtype: 'container',
margin: 10,
layout: 'hbox',
items: [{
xtype: 'label',
html: 'You have sent'
}, {
xtype: 'label',
html: '0 enquiry',
right: 0
}]
}, {
xtype: 'container',
margin: 10,
cls: 'linesAboveBelow',
layout: 'hbox',
items: [{
xtype: 'label',
html: 'You have'
}, {
xtype: 'label',
html: '1 unread response',
right: 0
}]
}]
}, {
xtype: 'list',
itemTpl: '{title}',
flex: 1,
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}]
}]
}
});
有几个错误的配置项,如xtype:Card,type:‘vbox’。去掉了那些。已删除列表的额外包装容器。已更改FLEX属性。仅将FLEX添加到列表中。因为您希望列表在呈现标签后填充剩余空间。已将标题""My Inbox""添加到子容器中,因为导航视图的标题来自子项。""
这篇关于Sencha Touch List未显示(再次!)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文