View Full Version : Ext form fields : how to render images next to them to allow removing / duplicating

11 May 2013, 3:39 AM

We use a dynamically generated form panel to represent our business objects.

We are in the middle of moving this form from a custom html implementation using our own fields into an Extjs4 implementation using the extjs4 fields, I must say it is looking much nicer.

However, one problem I am having is replicating the behaviour of our own implementation in handling arrays.

I want to be able to render a small button next to a field if the field is removable, and for some fields a button with a + to add a new field underneath it.

What is the most elegant solution here. Ideally I want a generic solution that is the same for all field types.

I am thinking the fields' afterSubTpl (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.Labelable-cfg-afterSubTpl) property is the way to go here.. am I on the right track?

13 May 2013, 11:55 AM
The afterSubTpl may be handy - haven't used it myself, but tried in a test real quick just now and if you add a simple HTML string it positions it below the field.

You might consider wrapping the fields that are eligible for deletion / replication in a fieldcontainer, too. Then the add/delete buttons could be ExtJS button components which participate in the fieldcontainer's (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.FieldContainer) layout and whose events can be listened for directly on a controller.