1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<html>
<head>
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">Ext.ns("Ext.ux");
<div id="cls-Ext.ux.FieldReplicator"></div>/**
* @class Ext.ux.FieldReplicator
* <p>A plugin for Field Components which creates clones of the Field for as
* long as the user keeps filling them. Leaving the final one blank ends the repeating series.</p>
* <p>Usage:</p>
* <pre><code>
{
xtype: 'combo',
plugins: [ Ext.ux.FieldReplicator ],
triggerAction: 'all',
fieldLabel: 'Select recipient',
store: recipientStore
}
* </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);
},
// 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;
}
}
},
// Handle the field either being changed to blank or from blank.
onChange: function(f, n, o) {
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 (f.focusPrev) {
delete f.focusPrev;
ps.focus(false, true);
} else if (f.focusNext) {
delete f.focusNext;
ns.focus(false, true);
}
}
};</pre>
</body>
</html>
|
