How can i load nested forms in extjs

Question

I have the simple form with textfields and its working fine.

Now i have the requirement that user should be able add many tags in the form.

The form is hardcoded with fields.

then i need section called tags where by default i will have single textbox and add button so that user can add more tags by typing.

I am thinking of using tags in separate forms but i am not sure how to do it

Any ideas please

Answer 1

Here is a simple JSFidle in ExtJS 4.2.0 with dynamic adding of fields to formpanel and sending them on form submit to backend.

You can see that newly added fields getting sent to backend in fiddler.

And below is the code I have added to dynamically add fields on Add Tags Button Click :

   {
        xtype:'button',
        text:'Add Tags',
        width:100,
        handler:function(btn){
            formpanel.add({
                fieldLabel: 'New Item'+formpanel.items.length,     // formpanel is the name of the formpanel
                name: 'item'+formpanel.items.length,
                allowBlank: false
            });           
        }
    }