examples/docs/source/FieldReplicator.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 Ext.ns("Ext.ux");
  16
  17 <div id="cls-Ext.ux.FieldReplicator"></div>/**
  18  * @class Ext.ux.FieldReplicator
  19  * <p>A plugin for Field Components which creates clones of the Field for as
  20  * long as the user keeps filling them. Leaving the final one blank ends the repeating series.</p>
  21  * <p>Usage:</p>
  22  * <pre><code>
  23     {
  24         xtype: 'combo',
  25         plugins: [ Ext.ux.FieldReplicator ],
  26         triggerAction: 'all',
  27         fieldLabel: 'Select recipient',
  28         store: recipientStore
  29     }
  30  * </code></pre>
  31  */
  32 Ext.ux.FieldReplicator = {
  33     init: function(f) {
  34         f.replicator = this;
  35         f.enableKeyEvents = true;
  36         f.on('change', this.onChange, this);
  37         f.onKeyDown = f.onKeyDown.createInterceptor(this.onKeyDown);
  38     },
  39
  40 //  If tabbing out and the change event will be fired, flag that
  41 //  the change handler must focus the correct sibling Field.
  42     onKeyDown: function(e) {
  43         if ((e.getKey() == Ext.EventObject.TAB) && (String(this.startValue) !== String(this.getValue()))) {
  44             if (e.shiftKey) {
  45                 this.focusPrev = true;
  46             } else if (!e.shiftKey && !e.altKey) {
  47                 this.focusNext = true;
  48             }
  49         }
  50     },
  51
  52 //  Handle the field either being changed to blank or from blank.
  53     onChange: function(f, n, o) {
  54
  55 //              Ensure that "change" is only fired once.
  56         f.startValue = n;
  57
  58         var c = f.ownerCt, l,
  59             ps = f.previousSibling(),
  60             ns = f.nextSibling();
  61         if (Ext.isEmpty(n)) {
  62             if (!Ext.isEmpty(o)) {
  63 //              The Field has been blanked, and it is not the only one left, remove it
  64                 if ((ps && (ps.replicator === this)) || (ns && (ns.replicator === this))) {
  65                     l = f.findParentBy(function(p) {
  66                         return !Ext.isDefined(p.ownerCt);
  67                     });
  68                     c.remove(f);
  69                     l.doLayout();
  70                 }
  71             }
  72         } else {
  73             if (Ext.isEmpty(o)) {
  74 //              Field filled, insert a clone as the next sibling
  75                 ns = new f.constructor(f.cloneConfig());
  76                 c.insert(c.items.indexOf(f) + 1, ns);
  77                 c.doLayout();
  78                 l = f.findParentBy(function(p) {
  79                     return !Ext.isDefined(p.ownerCt);
  80                 });
  81                 l.doLayout();
  82             }
  83         }
  84         if (f.focusPrev) {
  85             delete f.focusPrev;
  86             ps.focus(false, true);
  87         } else  if (f.focusNext) {
  88             delete f.focusNext;
  89             ns.focus(false, true);
  90         }
  91     }
  92 };</pre>
  93 </body>
  94 </html>