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

Question

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

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

View 正确呈现但不可滚动，取消注释父容器上的 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());
    }
}