user-interface - 2 つの Sencha Ext.List を縦に積み重ねる

Question

2 つの Sencha Touch Ext.List を縦に積み重ねたいです。これらのリストの両方を、スクロール可能なコンテナーに属させたいと考えています。私が抱えている問題は、これらのリストを完全に展開されたコンポーネントになるように構成する方法がわからないことです (コンテナーを含むコンテナーがスクロールを処理する必要があります)。

つまり、最初のリストの内容全体を下にスクロールして、2 番目のリストに到達する必要があります。

さらに、収容コンテナは、フォームなどの他の積み重ねられたコンポーネントで満たすこともできる必要があります。

例：

-> Container (should show scroll bars if contained content doesn't fit in the container)
   -> Form (should not show any scrollbars, thus fully expanded)
   -> List (should not show any scrollbars, thus fully expanded)
   -> List (should not show any scrollbars, thus fully expanded)

アップデート

リストの scrollable を null に設定することで、何かを機能させることができました。ただし、2.1.0 より前の Sencha Touch バージョンでのみ動作するため、2.0.1 は正常に動作します。

    var mainPanel = Ext.create("Ext.Container",
    {
        fullscreen: true,
        layout: 'vbox'
    });

    var subPanel = Ext.create("Ext.Container", {
        flex: 1,
        layout: 'vbox'
    });

    Ext.define('MyList', {
        extend: 'Ext.List',
        config: {
            scrollable: null,
            fullscreen: false
        }
    });

    var itemName = 'MyItem';
    Ext.define(itemName, {
        extend: 'Ext.data.Model',
        config: {
            fields: ["title"]
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: itemName,
        data: [
                { title: 'row1' },
                { title: 'row2' }
            ]
    });

    var list1 = Ext.create('MyList');
    list1.setItemTpl('<div>List 1 - {title}</div>');
    list1.setStore(store);

    var list2 = Ext.create('MyList');
    list2.setItemTpl('<div>List 2 - {title}</div>');
    list2.setStore(store);

    subPanel.add(list1);
    subPanel.add(list2);

    mainPanel.add(subPanel);
    Ext.Viewport.add(mainPanel);

2.1.0以降で機能しない理由はありますか?