如何制作嵌套的可重用字段集并使用updateRecord检索输入，使用setRecord加载输入的数据？

Question

我的应用需要用户输入大量数据。并且有重复，所以例如人员字段必须填写三次（所有可能不同）。

我想重复使用的人员字段集

Ext.define('MyApp.form.PersonForm',
{
    extend: 'Ext.form.FieldSet',
    xtype: 'personform',

    config:
    {
        items:
        [
            {
                xtype: 'textfield',
                name: 'surname',
                label: 'Naam:',
                placeHolder: ''
            },
            {
                xtype: 'textfield',
                name: 'adres',
                label: 'Adres:',
                placeHolder: 'Straat en huisnummer'
            },
            {
                xtype: 'textfield',
                name: 'zipCode',
                label: 'Postcode:',
                placeHolder: '1234AB'
            },
            {
                xtype: 'textfield',
                name: 'city',
                label: 'Plaats:',
                placeHolder: 'Of stad'
            },
            {
                xtype: 'textfield',
                name: 'country',
                label: 'Land:',
                placeHolder: ''
            },
            {
                xtype: 'textfield',
                name: 'phone',
                label: 'Telefoon:',
                placeHolder: ''
            },
            {
                xtype: 'textfield',
                name: 'email',
                label: 'e-mail:',
                placeHolder: ''
            }
        ]
    }
});

所以我做了一个小字段集，并试图在表单中重复使用它们几次。但是当我尝试加载保存的数据时，它会将具有相同名称的所有字段连接到一个字段数组中，因此它们不会更新。

因此，每个字段集现在只包含其中的字段，而不是在其中包含其他字段集。必须将所有内容放在自己的容器中，以便我可以在控制器中访问它们并更新\加载它们各自的数据。

Ext.define('MyApp.form.UserDataForm',
{
    extend: 'Ext.Container',
    requires:
    [
        'Ext.form.FieldSet',
        'Ext.form.Panel',
        'Ext.field.Hidden',
        'MyApp.form.PersonForm'
    ],

    xtype: 'userdataform',

    config:
    {
        items:
        [
            {
                xtype: 'formpanel',
                itemId: 'userDataForm',
                flex: 1,

                items:
                {
                    xtype: 'fieldset',

                    items:
                    [
                        {
                            xtype: 'hiddenfield',
                            name: 'id'
                        },
                        {
                            xtype: 'textfield',
                            name: 'reportCode',
                            label: 'Meld code:',
                            itemId: 'txtReportCode'
                        },
                        {
                            xtype: 'textfield',
                            name: 'firstName',
                            label: 'Voornaam:',
                            itemId: 'txtFirstName'
                        }
                    ]
                }
            },
            {
                xtype: 'personform',
                name: 'person'
            }
        ]
    }
});

问题是面板中的字段集是不可见的（与所有彼此嵌套的字段集不同）。所以这只显示了人物形象。但是，当我将高度强制设置为值时，会显示第一个字段集。

加载已保存数据和保存输入的代码：

onLoadUserData: function ()
{
    var userDataStore = Ext.getStore('userDataStore');
    var userDataRecord = userDataStore.getFirst();
    var userDataView = this.getUserDataView();
    var userDataForm = this.getUserDataForm();

    userDataForm.setRecord(userDataRecord);
    userDataForm.down('personform[name=insured]').setRecord(userDataRecord.data.person);
},

onTapBtnSave: function ()
{
    var userDataView = this.getUserDataView();
    var userDataStore = Ext.getStore('userDataStore');
    var isNew = userDataStore.getCount() == 0;

    var userDataRecord = userDataStore.getFirst();
    userDataView.updateRecord(userDataRecord);
    userDataRecord.data.person = userDataRecord.data.person|| Ext.create('MyApp.model.PersonModel');
    userDataView.updateRecord(userDataRecord.data.person);

    if (isNew)
    {
        userDataStore.add(userDataRecord);
    }
    else
    {
        userDataRecord.setDirty();
    }

    userDataStore.sync();
}

我尝试使用布局：＆＃39; vbox＆＃39;和布局：＆＃39; flex＆＃39;和/或不在包含面板上使用flex：1。 那么如何让Sencha在那里显示那些字段而不强迫特定的高度呢？

编辑：问题似乎在于使用form.Panel而不是容器。虽然容器只需占用面板所需的空间，但不会。但我需要它作为一个面板来加载和保存用户输入工作。