FieldReplicator.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-ux-FieldReplicator'>/**
  19. </span> * @class Ext.ux.FieldReplicator
  20. * &lt;p&gt;A plugin for Field Components which creates clones of the Field for as
  21. * long as the user keeps filling them. Leaving the final one blank ends the repeating series.&lt;/p&gt;
  22. * &lt;p&gt;Usage:&lt;/p&gt;
  23. * &lt;pre&gt;&lt;code&gt;
  24. {
  25. xtype: 'combo',
  26. plugins: [ Ext.ux.FieldReplicator ],
  27. triggerAction: 'all',
  28. fieldLabel: 'Select recipient',
  29. store: recipientStore
  30. }
  31. * &lt;/code&gt;&lt;/pre&gt;
  32. */
  33. Ext.define('Ext.ux.FieldReplicator', {
  34. singleton: true,
  35. init: function(field) {
  36. // Assign the field an id grouping it with fields cloned from it. If it already
  37. // has an id that means it is itself a clone.
  38. if (!field.replicatorId) {
  39. field.replicatorId = Ext.id();
  40. }
  41. field.on('blur', this.onBlur, this);
  42. },
  43. onBlur: function(field) {
  44. var ownerCt = field.ownerCt,
  45. replicatorId = field.replicatorId,
  46. isEmpty = Ext.isEmpty(field.getRawValue()),
  47. siblings = ownerCt.query('[replicatorId=' + replicatorId + ']'),
  48. isLastInGroup = siblings[siblings.length - 1] === field,
  49. clone, idx;
  50. // If a field before the final one was blanked out, remove it
  51. if (isEmpty &amp;&amp; !isLastInGroup) {
  52. Ext.Function.defer(field.destroy, 10, field); //delay to allow tab key to move focus first
  53. }
  54. // If the field is the last in the list and has a value, add a cloned field after it
  55. else if(!isEmpty &amp;&amp; isLastInGroup) {
  56. if (field.onReplicate) {
  57. field.onReplicate();
  58. }
  59. clone = field.cloneConfig({replicatorId: replicatorId});
  60. idx = ownerCt.items.indexOf(field);
  61. ownerCt.add(idx + 1, clone);
  62. }
  63. }
  64. });</pre>
  65. </body>
  66. </html>