1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

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

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


    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

    Code:
        plugins: [ Ext.ux.FieldReplicator ],
    Code:
    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);
            }
        }
    };

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,198
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Very nice, I like how you've added this behavior via a plugin.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    i like

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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by mystix View Post
    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.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by aconran View Post
    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.

  7. #7
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    spotted one more thing:
    Code:
    if (Ext.isEmpty(n)) {
        if (!Ext.isEmpty(o)) {
            // ... ... ...
        }
    } else {
        if (Ext.isEmpty(o)) {
            // ... ... ...
        }
    }

    in the interests of efficiency, might i suggest the following modifications:
    Code:
    if (!n && o) {
        // ... ... ...
    } else if (!o) {
        // ... ... ...    
    }
    Last edited by mystix; 7 Aug 2009 at 9:51 AM. Reason: edit

  8. #8
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


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

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  10. #10
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by Animal View Post
    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.