如何在Sencha Touch中進行自由流動的組件布局

Question

我的布局有點像這樣：

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    requires: [
        '...'
    ],
    xtype: 'myformpanel',
    id: 'myFormPanel',
    config: {
        layout: {
            type: 'vbox',
            pack: 'start',
            align: 'stretch'
        },
        cls: 'my-form-panel',
        items: [
            {
                xtype: 'container',
                items: {
                    xtype: 'image',
                    mode: 'image',
                    width: 150,
                    height: 150
                }
            },
            {
                xtype: 'fieldset',
                defaults: {
                    xtype: 'textfield'
                },
                items: [
                    {
                        itemId: 'titleTextfield',
                        cls: 'title-textfield',
                        placeHolder: 'Title',
                        name: 'title'
                    }
                ]
            },
            {
                xtype: 'container',
                height: 100
            },
            {
                xtype: 'container',
                height: 100
            },
            {
                xtype: 'list',
        infinite: true,
        onItemDisclosure: true,
        mode: 'MULTI',
        flex: 1
            }
        ],
        listeners: [
            {
                ...
            }
        ]
    }
});

我要確保列表占據其自然高度，而無需在列表內部滾動–相反，我希望整個表單面板向上滾動。 現在，該列表僅占據布局上方所有內容后剩余的空間。

我該如何實現？ 非常感謝幫助！ 謝謝！

Answer 1

事實證明，解決方案並不簡單。 在ST論壇的幫助下，此方法有效：

{
  xtype: 'list',
  infinite: true,
  // ...
  items: [
    {
      xtype: 'formpanel',
      scrollDock: 'top'
    }
  ]
}

基本上，我必須將所有組件以scollDocked放在列表的頂部。 希望這可以幫助。