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 list inside a container visibleで提案されているように設定
height
します。auto