1

我正在尝试在 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"},
            ]
        }
        ]
    }
});

我尝试过的修复包括：

4

1 回答 1

3

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

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

listeners: {
    painted: function() {
        this.setHeight(this.itemsCount*this.getItemHeight());
    }
}
于 2013-09-13T14:33:14.733 回答