FieldReplicator.js 1.7 KB

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