我的Sencha Touch列表未显示。我所做的只是将根容器更改为导航视图,以便可以将其他视图推送到其上,但导航不喜欢将“适合”作为根。所以我将其移动到另一个类型为“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>'
]
}
]
}
]
}
]
}
});
答案 0 :(得分:4)
我修改了你的布局代码。 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到列表。如您所希望,列表在渲染标签后填充剩余空间。将标题“我的收件箱”添加到子容器,因为导航视图具有子项目的标题。
答案 1 :(得分:0)
您需要使用:
layout: 'vbox'
而不是:
type: 'vbox'
为你的第一个容器,它应该工作。