Sencha Touch列表未显示（再次出现！）

Question

我的Sencha Touch列表没有显示出来。我只是把根容器更改为导航视图以便能将其他视图推入它，但此时导航视图不喜欢将'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>'
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

- jaffa

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

- blessanm86

---

谢谢，这个很好用！抱歉我有点傻，但是我的视图最初有什么问题？我使用Sencha Architect创建了布局，所以很想知道问题出在哪里。 - jaffa

我已经更新了我的回答。顺便选择这个作为正确答案。 - blessanm86

Answer 2

你需要使用：

layout: 'vbox'

改为：

type: 'vbox'

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

- Eli

---

它是“Ext.navigation.View”这一事实是否会影响它作为列表的功能？ - jaffa

@jaffa 我不知道为什么，但我刚刚创建了一个fiddle，它对我有效：http://www.senchafiddle.com/#BBTuu - Eli