extjs - 如何在 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 放在顶部 - 列表内。希望这可以帮助。