如何在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到顶部-内部的列表。