Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / ux / FieldReplicator.js
index fdbba00..dbb2f77 100644 (file)
@@ -1,11 +1,3 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.ns("Ext.ux");
-
 /**
  * @class Ext.ux.FieldReplicator
  * <p>A plugin for Field Components which creates clones of the Field for as
@@ -21,64 +13,37 @@ Ext.ns("Ext.ux");
     }
  * </code></pre>
  */
-Ext.ux.FieldReplicator = {
-    init: function(f) {
-        f.replicator = this;
-        f.enableKeyEvents = true;
-        f.on('change', this.onChange, this);
-        f.onKeyDown = f.onKeyDown.createInterceptor(this.onKeyDown);
-    },
+Ext.define('Ext.ux.FieldReplicator', {
+    singleton: true,
 
-//  If tabbing out and the change event will be fired, flag that
-//  the change handler must focus the correct sibling Field.
-    onKeyDown: function(e) {
-        if ((e.getKey() == Ext.EventObject.TAB) && (String(this.startValue) !== String(this.getValue()))) {
-            if (e.shiftKey) {
-                this.focusPrev = true;
-            } else if (!e.shiftKey && !e.altKey) {
-                this.focusNext = true;
-            }
+    init: function(field) {
+        // Assign the field an id grouping it with fields cloned from it. If it already
+        // has an id that means it is itself a clone.
+        if (!field.replicatorId) {
+            field.replicatorId = Ext.id();
         }
-    },
 
-//  Handle the field either being changed to blank or from blank.
-    onChange: function(f, n, o) {
+        field.on('blur', this.onBlur, this);
+    },
 
-//             Ensure that "change" is only fired once.
-       f.startValue = n;
+    onBlur: function(field) {
+        var ownerCt = field.ownerCt,
+            replicatorId = field.replicatorId,
+            isEmpty = Ext.isEmpty(field.getRawValue()),
+            siblings = ownerCt.query('[replicatorId=' + replicatorId + ']'),
+            isLastInGroup = siblings[siblings.length - 1] === field,
+            clone, idx;
 
-        var c = f.ownerCt, l,
-            ps = f.previousSibling(),
-            ns = f.nextSibling();
-        if (Ext.isEmpty(n)) {
-            if (!Ext.isEmpty(o)) {
-//              The Field has been blanked, and it is not the only one left, remove it
-                if ((ps && (ps.replicator === this)) || (ns && (ns.replicator === this))) {
-                    l = f.findParentBy(function(p) {
-                        return !Ext.isDefined(p.ownerCt);
-                    });
-                    c.remove(f);
-                    l.doLayout();
-                }
-            }
-        } else {
-            if (Ext.isEmpty(o)) {
-//              Field filled, insert a clone as the next sibling
-                ns = new f.constructor(f.cloneConfig());
-                c.insert(c.items.indexOf(f) + 1, ns);
-                c.doLayout();
-                l = f.findParentBy(function(p) {
-                    return !Ext.isDefined(p.ownerCt);
-                });
-                l.doLayout();
-            }
+        // If a field before the final one was blanked out, remove it
+        if (isEmpty && !isLastInGroup) {
+            Ext.Function.defer(field.destroy, 10, field); //delay to allow tab key to move focus first
         }
-        if (f.focusPrev) {
-            delete f.focusPrev;
-            ps.focus(false, true);
-        } else  if (f.focusNext) {
-            delete f.focusNext;
-            ns.focus(false, true);
+        // If the field is the last in the list and has a value, add a cloned field after it
+        else if(!isEmpty && isLastInGroup) {
+            clone = field.cloneConfig({replicatorId: replicatorId});
+            idx = ownerCt.items.indexOf(field);
+            ownerCt.add(idx + 1, clone);
         }
     }
-};
\ No newline at end of file
+
+});
\ No newline at end of file