sencha-touch - Sencha Touch 列表不显示（再次！）

Question

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

Answer 1

我已经修改了你的布局代码。这是一个小提琴。

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 添加到列表中。因为您希望列表在呈现标签后填充剩余空间。将标题“我的收件箱”添加到子容器中，因为导航视图的标题来自子项。

Answer 2

你需要使用：

layout: 'vbox'

代替：

type: 'vbox'

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