ExtJs 4 динамических поля формы во вложенных панелях не отправляются

Question

Допустим, у меня есть несколько вложенных панелей (простых, а не form.Panel), содержащих поля формы. Пользователь может скопировать такую ​​панель и ее поля на другую панель.

Мне как-то нужно добавить эти вновь созданные поля в главную formpanel, чтобы они были отправлены, но не знаю как.

Я не могу сделать

formpanel.add(fields)

потому что тогда они отображаются на теле formpanel, а не на панели, в которой они находились. Установка свойства renderTo для полей тоже не помогает.

Так что в основном мне нужен способ добавления поля на обычную панель (или любого другого компонента в этом отношении), но также добавление его к определенной формуле, чтобы ее значения были представлены при отправке формы.

Кто-нибудь сделал это или мог, по крайней мере, указать мне правильное направление?

Answer 1

Вы можете обернуть все свои панели в одну панель формы, и все поля внутри будут отправлены.Я сделал это с аккордеонами, табулем и обычными панелями, глубоко вложенными друг в друга.Пример:

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);
    }
});