Sencha Touch 列表不显示（再次！）
Posted
技术标签:
【中文标题】Sencha Touch 列表不显示（再次！）【英文标题】：Sencha Touch list not displaying (again!) 【发布时间】：2013-05-09 06:26:31 【问题描述】：我的 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>'
]
]
]
]
);
【问题讨论】：
【参考方案1】：我已经修改了您的布局代码。 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 添加到列表中。因为您希望列表在呈现标签后填充剩余空间。将标题“我的收件箱”添加到子容器中，因为导航视图的标题来自子项。
【讨论】：
您好，谢谢，它成功了！抱歉我很笨，但我最初的观点有什么问题？我使用 Sencha Architect 创建布局，所以很想知道问题出在哪里。 我已经更新了我的答案。顺便说一句，选择这个作为正确答案。【参考方案2】：你需要使用：
layout: 'vbox'
代替：
type: 'vbox'
对于您的第一个容器，它应该可以工作。
【讨论】：
它是一个“Ext.navigation.View”这一事实是否会改变它作为一个列表的任何内容？ @jaffa 我不知道为什么，但我只是创建了一个小提琴，但它对我有用：senchafiddle.com/#BBTuu以上是关于Sencha Touch 列表不显示（再次！）的主要内容，如果未能解决你的问题，请参考以下文章