examples/ux/FieldReplicator.js

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