Creating repeatable form fields and fieldsets

1. Start by creating a form panel and rendering it to the document's body:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Reservation Form',
width: 350,
autoHeight: true,
bodyPadding: 10,
defaults: {
labelWidth: 150
},
items: [],
renderTo: Ext.getBody()
});

2. Add some fields to the form's items collection to capture name and Ticket Type
for the first person:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'textfield',
fieldLabel: 'Your Name',
name: 'name'
}, {
xtype: 'radiogroup',
fieldLabel: 'Ticket Type',
items: [{
boxLabel: 'Adult',
name: 'type',
inputValue: 'adult'
}, {
boxLabel: 'Child',
name: 'type',
inputValue: 'child'
}]
}],
...
});

3. Create our GuestFieldSet by extending the Ext.form.FieldSet class:
Ext.define('GuestFieldSet', {
extend: 'Ext.form.FieldSet',
alias: 'widget.GuestFieldSet',
initComponent: function(){
Ext.apply(this, {
title: 'Guest ' + this.guestCount,
collapible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [{
fieldLabel: 'Guest ' + this.guestCount + ' Name',
name: 'name-' + this.guestCount
}, {
xtype: 'radiogroup',
fieldLabel: 'Ticket Type',
items: [{
boxLabel: 'Adult',
name: 'type-' + this.guestCount,
inputValue: 'adult'
}, {
boxLabel: 'Child',
name: 'type-' + this.guestCount,
inputValue: 'child'
}]
}]
});
this.callParent(arguments);
}
});

4. Finally, add a button under the fields in the form panel to allow the user to add
a second guest. The button's handler function contains the logic to add the
additional fields:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
...
}, {
xtype: 'button',
text: 'Add Another Guest',
margin: '0 0 5 0',
handler: function(){
guestCount = formPanel.items.length - 2;
formPanel.add({
xtype: 'GuestFieldSet',
guestCount: guestCount
});
}
}],
...
});