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 に答える