sencha-touch - Sencha Touch 列表未显示(再次!)

Question

我的 Sencha Touch 列表没有显示。我所做的只是将根容器更改为导航 View ，以便可以将其他 View 推送到它上面，但是导航不喜欢将“适合”作为根。所以我把它移到另一个类型为“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

我已经修改了您的布局代码。 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 添加到列表中。由于您希望列表在渲染标签后填充剩余空间。将标题“我的收件箱”添加到子容器，因为导航 View 的标题来自子项。