如何在Sencha Touch 2.2视图中显示容器和列表并使整个视图可滚动？

Question

我正在尝试在Sencha Touch 2.2.1中创建一个视图，其顶部包含一个停靠的工具栏，下方有一个容器，下面列出了该容器。我想要渲染的视图，以便容器只占用显示其内容所需的空间，下面的列表是其所有内容的高度。我不希望列表本身滚动，而是要滚动整个视图，以便在向下滚动容器时向上滚动出视口。

以下是我的尝试，并在此jsfiddle中提供了现场演示。

视图呈现正确但不可滚动，取消注释父容器上的scrollable: true会使列表消失。

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    config: {
        fullscreen: true,
        // This is the behaviour I want i.e. the whole container to be scrollable but when enabled the list disappears :(
        // scrollable: true, 
        items: [
        {
            docked : 'top',
            xtype: 'toolbar',
            title: 'Container with Infinite List Demo'
        },
        {
            html: "<h1>Hello World!</h1><p>I'm a basic container with a list below:</p>"
        },
        {
            xtype: 'list',
            scrollable: false,
            height: '100%',
            itemTpl: '{name}',
            data: [
                {name: "Item 1"},
                {name: "Item 2"},
                {name: "Item 3"},
                {name: "Item 4"},
                {name: "Item 5"},
                {name: "Item 6"},
                {name: "Item 7"},
                {name: "Item 8"},
                {name: "Item 9"},
                {name: "Item 9"},
                {name: "Item 10"},
                {name: "Item 11"},
                {name: "Item 12"},
                {name: "Item 13"},
                {name: "Item 14"},
                {name: "Item 15"},
                {name: "Item 16"},
                {name: "Item 17"},
                {name: "Item 18"},
                {name: "Item 19"},
                {name: "Item 20"},
            ]
        }
        ]
    }
});

我尝试过的尝试包括：

• 按SO: how to display list and other labels in single page using sencha touch2。
中的建议将layout设置为vbox
• 按照SO: Sencha touch make a list inside a container visible中的建议将height设置为auto。

Answer 1

您必须设置特定的列表高度才能显示。如果您不知道列表的最终高度，请尝试获取它：

将此处理程序附加到您的列表中：

listeners: {
    painted: function() {
        this.setHeight(this.itemsCount*this.getItemHeight());
    }
}