extjs/packages/ux/classic/src/FieldReplicator.js

   1 /**
   2  * <p>A plugin for Field Components which creates clones of the Field for as
   3  * long as the user keeps filling them. Leaving the final one blank ends the repeating series.</p>
   4  * <p>Usage:</p>
   5  * <pre><code>
   6     {
   7         xtype: 'combo',
   8         plugins: [ Ext.ux.FieldReplicator ],
   9         triggerAction: 'all',
  10         fieldLabel: 'Select recipient',
  11         store: recipientStore
  12     }
  13  * </code></pre>
  14  */
  15 Ext.define('Ext.ux.FieldReplicator', {
  16     alias: 'plugin.fieldreplicator',
  17
  18     init: function(field) {
  19         // Assign the field an id grouping it with fields cloned from it. If it already
  20         // has an id that means it is itself a clone.
  21         if (!field.replicatorId) {
  22             field.replicatorId = Ext.id();
  23         }
  24
  25         field.on('blur', this.onBlur, this);
  26     },
  27
  28     onBlur: function(field) {
  29         var ownerCt = field.ownerCt,
  30             replicatorId = field.replicatorId,
  31             isEmpty = Ext.isEmpty(field.getRawValue()),
  32             siblings = ownerCt.query('[replicatorId=' + replicatorId + ']'),
  33             isLastInGroup = siblings[siblings.length - 1] === field,
  34             clone, idx;
  35
  36         // If a field before the final one was blanked out, remove it
  37         if (isEmpty && !isLastInGroup) {
  38             Ext.Function.defer(field.destroy, 10, field); //delay to allow tab key to move focus first
  39         }
  40         // If the field is the last in the list and has a value, add a cloned field after it
  41         else if(!isEmpty && isLastInGroup) {
  42             if (field.onReplicate) {
  43                 field.onReplicate();
  44             }
  45             clone = field.cloneConfig({replicatorId: replicatorId});
  46             idx = ownerCt.items.indexOf(field);
  47             ownerCt.add(idx + 1, clone);
  48         }
  49     }
  50
  51 });