FieldReplicator. A Field which keeps adding clones of itself until left blank.

[Animal]

Just like mailto addresses, sometimes you want multiple identical versions of an input field until the user has had enough, and leaves the last one blank.

This is a plugin to any Field which makes it self replicating. Blanking out any Field in the series deletes it (Unless it was the last one!)

Just configure the Field with

    plugins: [ Ext.ux.FieldReplicator ],

Ext.ux.FieldReplicator = {
    init: function(f) {
        f.replicator = this;
        f.enableKeyEvents = true;
        f.on('change', this.onChange, this);
        f.onKeyDown = f.onKeyDown.createInterceptor(this.onKeyDown);
    },

//  If tabbing out and the change event will be fired, flag that
//  the change handler must focus the correct sibling field.
    onKeyDown: function(e) {
        if ((e.getKey() == Ext.EventObject.TAB) && (String(this.startValue) !== String(this.getValue()))) {
        	if (e.shiftKey) {
	            this.focusPrev = true;
        	} else {
	            this.focusNext = true;
	        }
        }
    },

//  Handle the field either being changed to blank or from blank.
    onChange: function(f, n, o) {
        var c = f.ownerCt, l,
            ps = f.previousSibling(),
            ns = f.nextSibling();
        if (Ext.isEmpty(n)) {
            if (!Ext.isEmpty(o)) {
//              The Field has been blanked, and it is not the only one left, remove it
                if ((ps && (ps.replicator === this)) || (ns && (ns.replicator === this))) {
                    l = f.findParentBy(function(p) {
                        return !Ext.isDefined(p.ownerCt);
                    });
                    c.remove(f);
                    l.doLayout();
                }
            }
        } else {
            if (Ext.isEmpty(o)) {
//              Field filled, insert a clone as the next sibling
                ns = new f.constructor(f.cloneConfig());
                c.insert(c.items.indexOf(f) + 1, ns);
                c.doLayout();
                l = f.findParentBy(function(p) {
                    return !Ext.isDefined(p.ownerCt);
                });
                l.doLayout();
            }
        }
        if (f.focusPrev) {
            delete f.focusPrev;
            ps.focus(false, true);
        } else  if (f.focusNext) {
            delete f.focusNext;
            ns.focus(false, true);
        }
    }
};

[aconran]

Very nice, I like how you've added this behavior via a plugin.

[mystix]

i like

p.s. would it be a good idea to delete the id from the cloned Field config tp prevent possible conflicts?

[Animal]

i like

p.s. would it be a good idea to delete the id from the cloned Field config tp prevent possible conflicts?

Yes, well spotted.

I will update the first post.

[Animal]

Component.cloneConfig generates a new ID, so all will be well with the original code.

I'll add some extra stuff to the cloneConfig documentation to make it clearer.

[Animal]

Very nice, I like how you've added this behavior via a plugin.

It's definitely best in a lot of cases.

I originally extended Ext.form.TextField, but realized that left TriggerFields high and dry.

[mystix]

spotted one more thing:

if (Ext.isEmpty(n)) {
    if (!Ext.isEmpty(o)) {
        // ... ... ...
    }
} else {
    if (Ext.isEmpty(o)) {
        // ... ... ...
    }
}

in the interests of efficiency, might i suggest the following modifications:

if (!n && o) {
    // ... ... ...
} else if (!o) {
    // ... ... ...    
}

[mystix]

i realise my suggested mod allows empty arrays, but all other bases are covered
(does anyone set arrays into Fields?)

[Animal]

The getValue() values are whatever the Field returns, so that could be anything.

I think we should allow people to write Fields which can return any kind of Object.

[mystix]

I think we should allow people to write Fields which can return any kind of Object.

i'm beginning to like that concept.
i recant for now.