ReplicatableField.js

Ext.define('RepositoryManager.form.ReplicatableField', {
   extend: 'Ext.form.FieldContainer',
   alias: 'widget.replicatablefield',
   config: {
      replicateEvent: 'blur',
      removeButton: {}
   },
   layout: 'hbox',

   initComponent: function() {
      this.callParent(arguments);

      // Assign the field an id grouping it with fields cloned from it. If it already
      // has an id that means it is itself a clone.
      if (!this.replicatorId) {
         this.replicatorId = Ext.id();
      }

      // Attach replicate event handlers to all fields if replicateEvent is set
      if (this.replicateEvent) {
         var fields = this.getFields();
         for (var i = 0; i < fields.length; i++) {
            fields[i].on(this.replicateEvent, this.onReplicateEvent, this);
         }
      }

      // Attach remove button
      var removeButton = Ext.merge({
         xtype: 'button',
         iconCls: 'fa fa-times rm-dark-icon',
         handler: this.removeButtonClickHandler,
         scope: this
      }, this.removeButton);
      this.add([removeButton]);
   },

   getFields: function() {
      var fields = [];
      for (var i = 0; i < this.items.length; i++) {
         var item = this.items.getAt(i);
         if (item instanceof Ext.form.Field) {
            fields.push(item);
         }
      }
      return fields;
   },

   onReplicateEvent: function() {
      var siblings = this.ownerCt.query('[replicatorId=' + this.replicatorId + ']'),
         isLastInGroup = siblings[siblings.length - 1] === this;

         // isEmpty = Ext.isEmpty(this.getRawValue()),
      var isEmpty = false;
      var fields = this.getFields();
      for (var i = 0; i < fields.length; i++) {
         isEmpty = isEmpty || Ext.isEmpty(fields[i].getRawValue());
      }

      // If a this before the final one was blanked out, remove it
      if (isEmpty && !isLastInGroup) {
         this.remove();
      }
      // If the this is the last in the list and has a value, add a cloned this after it
      else if(!isEmpty && isLastInGroup) {
         this.replicate();
      }
   },

   remove: function() {
      Ext.Function.defer(this.destroy, 10, this); //delay to allow tab key to move focus first
   },

   removeButtonClickHandler: function() {
      var ownerCt = this.ownerCt,
         replicatorId = this.replicatorId,
         siblings = ownerCt.query('[replicatorId=' + replicatorId + ']'),
         isLastInGroup = siblings[siblings.length - 1] === this;

      if (!isLastInGroup || siblings.length > 1) {
         this.remove();
      } else {
         this.reset();
      }
   },

   replicate: function() {
      if (this.onReplicate) {
         this.onReplicate();
      }
      var clone = this.cloneConfig({replicatorId: this.replicatorId});
      var idx = this.ownerCt.items.indexOf(this);
      this.ownerCt.add(idx + 1, clone);
   },


   reset: function() {
      var fields = this.getFields();
      for (var i = 0; i < fields.length; i++) {
         fields[i].reset();
      }
   }
});