View Full Version : Dynamically generate new form fields using button clicks

13 Jun 2011, 10:57 PM

I'm hoping someone has an example or thread link somewhere that has addressed this before.

i have a formPanel in extjs 3.3.1. My users will need the ability to "add as many as necessary" to certain form fields. As an example, the first three fields might be for city, state, zip, but the 4th text field could be for "people you know". It is just another single textfield. If the user knows 8 people, the user would click an "add" button 7 times, populating a new field each time, for them to make an entry into. And these fields are in the middle of the form, not at the end or beginning. This add button is not the form submit button.

So, my question is, how do I give the user the ability to populate new text fields into the form, at their whim, using simple button clicks or other event firings?

From searching the extjs forums, I've noticed that most of the 'create dynamic form field' posts are not exactly what I am looking for, albeit close in some cases. Detecting clicks is easy, it's the adding of items/children that follows that has me stumped.

14 Jun 2011, 1:19 AM
Try following form method

insert (http://dev.sencha.com/deploy/ext-3.3.1/docs/source/Container.html#method-Ext.Container-insert)( Number index, Ext.Component component ) : Ext.ComponentInserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd (http://dev.sencha.com/deploy/ext-3.3.1/docs/output/Ext.Container.html#Ext.Container-beforeadd) event before inserting, then fires the add (http://dev.sencha.com/deploy/ext-3.3.1/docs/output/Ext.Container.html#Ext.Container-add) event after the Component has been inserted.Parameters:

index : NumberThe index at which the Component will be inserted into the Container's items collection
component : Ext.ComponentThe child Component to insert.

Ext uses lazy rendering, and will only render the inserted Component should it become necessary.

A Component config object may be passed in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the inserted Component will not be rendered immediately. To take advantage of this 'lazy instantiation', set the Ext.Component.xtype (http://dev.sencha.com/deploy/ext-3.3.1/docs/output/Ext.Component.html#Ext.Component-xtype) config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component (http://dev.sencha.com/deploy/ext-3.3.1/docs/output/Ext.Component.html).


Ext.Componentcomponent The Component (or config object) that was inserted with the Container's default config values applied.

14 Jun 2011, 10:49 AM
Thanks, it works!

I will post my html and extjs example soon for others who want to use it.

And I have been able to call remove on 'inserted' items and they cleanup as expected, I have read that this was a problem before ext 3. I combined this with the example show in this thread too: http://www.sencha.com/forum/showthread.php?18853-FormPanel-Dynamically-Add-Remove-Items-after-rendered

That example also demos how to go through and find the exact location where you want something added or removed.