Sencha touch Sencha触摸列表未显示（再次！）

我的Sencha触摸列表未显示。我所做的只是将根容器更改为导航视图，以便将其他视图推送到它上面，但是导航不喜欢将“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>'
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

Ext.define（'MyApp.view.inbox.MyInbox'{
扩展：“Ext.navigation.View”，
别名：“widget.myinboxview”，
要求：[
“Ext.navigation.View”
],
配置：{
标题：“我的收件箱”，
xtype:'卡片'，
项目：[
{
xtype:'容器'，
键入：“vbox”，
项目：[
{
xtype:'容器'，
弹性：1，
项目：[
{
xtype:'容器'，
差额：10，
布局：{
类型：“hbox”
},
项目：[
{
xtype:'标签'，
html:“您已发送”
},
{
xtype:'标签'，
html:“0查询”，
右：0
}
]
},
{
xtype:'容器'，
差额：10，
cls:“行在下方”，
布局：{
类型：“hbox”
},
项目：[
{
xtype:'标签'，
html:“你有”
},
{
xtype:'标签'，
html:“1个未读响应”，
右：0
}
]
}
]
},
{
xtype:'容器'，
弹性：5，
布局：{
类型：“适合”
},
项目：[
{
xtype:'列表'，
商店：“TheInbox查询商店”，
第三方物流：[
'日期：{CreationDate}'
]
}
]
}
]
}
]
}
});

您需要使用：

layout: 'vbox'

而不是：

type: 'vbox'

---

对于您的第一个容器，它应该可以工作。

我已经修改了您的布局代码

---

有几个错误的配置项，比如xtype:card，type:'vbox'。把那些都拿走了。已删除列表的额外包装容器。更改了flex属性。仅将flex添加到列表中。因为您希望列表在呈现标签后填充剩余空间。将标题“我的收件箱”添加到子容器中，因为导航视图的标题来自子项

它是一个“Ext.navigation.View”的事实是否改变了它作为列表的任何内容？@jaffa我不知道为什么，但我只是创建了一个小提琴，它对我很有用：嗨，谢谢你，它成功了！对不起，我很傻，但我的观点最初是怎么回事？我使用Sencha Architect来创建布局，因此我很想知道问题是什么。我更新了我的答案。顺便说一句，选择这个作为正确答案。

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'
                        }]
                    }]
                }]
            }
        });