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