Question

Let’s say I have multiple nested panels (plain ones, not form.Panel) containing form fields.
The user can copy such a panel and its fields to a different panel.

I somehow need to add those newly created fields to a main formpanel so they get submitted, but don’t know how.

I can’t do

formpanel.add(fields)

because then they’re rendered to the formpanel’s body and not the panel they were in in the first place. Setting the fields’ renderTo property doesn’t help either.

So basically I need a way of adding a field to a normal panel (or any other component for that matter), but also adding it to a specific formpanel so its values are submitted on form submit.

Has anyone done this or could at least point me in the right direction?

Answer 1

You can wrap all your panels inside one form panel and all the fields inside will be submitted. I did this way with accordeons, tabpanel and normal panels deeply nested inside each other. Example:

var form = Ext.create('Ext.form.Panel', {
    // form attributes goes here...
    // ...
    initComponent: function(){
        // all your panels goes here.
        this.items = [
            {
                xtype:'panel',
                title: 'First panel',
                layout: 'anchor',
                frame: true,
                defaults: {anchor: '100%'},
                items: [
                    {xtype:'textfield', name: 'foo',fieldLabel: 'Foo'},
                    {xtype:'textfield', name: 'foo',fieldLabel: 'Bar'}
                ]
            },
            {
                xtype:'panel',
                title: 'Second panel',
                layout: 'anchor',
                frame: true,
                defaults: {anchor: '100%'},
                items: [
                    {xtype:'textfield', name: 'baz',fieldLabel: 'Baz'},
                    {
                        xtype: 'panel',
                        items: [/* another set of fields */]
                    }
                ]
            },
        ];

        this.buttons = [/* ... your buttons here ...*/];

        this.callParent(arguments);
    }
});