Sencha Touch - 为什么这个列表不显示？

Question

我试着弄清楚为什么这个List不会出现在我在Sencha Touch中创建的导航视图中。只显示标题栏，其下方有一个空白屏幕。

var topView = Ext.define("Parks.view.Main", {
    extend: "Ext.navigation.View",
    fullscreen: true,
    config: {
        items: [
            {
                title: "Parks & Rec",
                padding: 10,
                items: [
                {
                    xtype: "list", 
                    fullscreen: true, 
                    itemTpl: "{name}",
                    data: [{name: "Local Parks"}, {name: "Local Monuments"}],
                    listeners: {
                        select: function(view, record){

                        }
                    }
                }
                ]

            }
        ]
    }

});

Answer 1

您应该只在fullscreen上使用Parks.view.Main配置。要使list组件适合父容器，您可以使用fit布局：

Ext.define("Parks.view.Main", {
    extend: "Ext.navigation.View",
    fullscreen: true,
    config: {
        items: [
            {
                title: "Parks & Rec",
                padding: 10,
                layout: 'fit',
                items: [
                {
                    xtype: "list", 
                    itemTpl: "{name}",
                    data: [{name: "Local Parks"}, {name: "Local Monuments"}],
                    listeners: {
                        select: function(view, record){

                        }
                    }
                }
                ]

            }
        ]
    }
});

Ext.Viewport.add(Ext.create('Parks.view.Main'));