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

Question

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

以下是我的尝试，此jsfiddle中提供了一个实时演示。

视图可以正确显示，但不能滚动，取消注释scrollable: true父容器上的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中的建议将layout设置为vbox ：如何使用sencha touch2在单个页面中显示列表和其他标签 。
• 按照SO中的建议将height设置为auto ：Sencha touch使容器内的列表可见 。

Answer 1

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

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

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