FieldAncestor.html
9.35 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-form-FieldAncestor'>/**
</span> * A mixin for {@link Ext.container.Container} components that are likely to have form fields in their
* items subtree. Adds the following capabilities:
*
* - Methods for handling the addition and removal of {@link Ext.form.Labelable} and {@link Ext.form.field.Field}
* instances at any depth within the container.
* - Events ({@link #fieldvaliditychange} and {@link #fielderrorchange}) for handling changes to the state
* of individual fields at the container level.
* - Automatic application of {@link #fieldDefaults} config properties to each field added within the
* container, to facilitate uniform configuration of all fields.
*
* This mixin is primarily for internal use by {@link Ext.form.Panel} and {@link Ext.form.FieldContainer},
* and should not normally need to be used directly. @docauthor Jason Johnston <jason@sencha.com>
*/
Ext.define('Ext.form.FieldAncestor', {
<span id='Ext-form-FieldAncestor-cfg-fieldDefaults'> /**
</span> * @cfg {Object} fieldDefaults
* If specified, the properties in this object are used as default config values for each {@link Ext.form.Labelable}
* instance (e.g. {@link Ext.form.field.Base} or {@link Ext.form.FieldContainer}) that is added as a descendant of
* this container. Corresponding values specified in an individual field's own configuration, or from the {@link
* Ext.container.Container#defaults defaults config} of its parent container, will take precedence. See the
* documentation for {@link Ext.form.Labelable} to see what config options may be specified in the fieldDefaults.
*
* Example:
*
* new Ext.form.Panel({
* fieldDefaults: {
* labelAlign: 'left',
* labelWidth: 100
* },
* items: [{
* xtype: 'fieldset',
* defaults: {
* labelAlign: 'top'
* },
* items: [{
* name: 'field1'
* }, {
* name: 'field2'
* }]
* }, {
* xtype: 'fieldset',
* items: [{
* name: 'field3',
* labelWidth: 150
* }, {
* name: 'field4'
* }]
* }]
* });
*
* In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100
* (from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use
* the labelWidth:150 from its own config.
*/
<span id='Ext-form-FieldAncestor-method-initFieldAncestor'> /**
</span> * Initializes the FieldAncestor's state; this must be called from the initComponent method of any components
* importing this mixin.
* @protected
*/
initFieldAncestor: function() {
var me = this,
onSubtreeChange = me.onFieldAncestorSubtreeChange;
me.addEvents(
<span id='Ext-form-FieldAncestor-event-fieldvaliditychange'> /**
</span> * @event fieldvaliditychange
* Fires when the validity state of any one of the {@link Ext.form.field.Field} instances within this
* container changes.
* @param {Ext.form.FieldAncestor} this
* @param {Ext.form.Labelable} The Field instance whose validity changed
* @param {String} isValid The field's new validity state
*/
'fieldvaliditychange',
<span id='Ext-form-FieldAncestor-event-fielderrorchange'> /**
</span> * @event fielderrorchange
* Fires when the active error message is changed for any one of the {@link Ext.form.Labelable} instances
* within this container.
* @param {Ext.form.FieldAncestor} this
* @param {Ext.form.Labelable} The Labelable instance whose active error was changed
* @param {String} error The active error message
*/
'fielderrorchange'
);
// Catch addition and removal of descendant fields
me.on('add', onSubtreeChange, me);
me.on('remove', onSubtreeChange, me);
me.initFieldDefaults();
},
<span id='Ext-form-FieldAncestor-method-initFieldDefaults'> /**
</span> * @private Initialize the {@link #fieldDefaults} object
*/
initFieldDefaults: function() {
if (!this.fieldDefaults) {
this.fieldDefaults = {};
}
},
<span id='Ext-form-FieldAncestor-method-onFieldAncestorSubtreeChange'> /**
</span> * @private
* Handle the addition and removal of components in the FieldAncestor component's child tree.
*/
onFieldAncestorSubtreeChange: function(parent, child) {
var me = this,
isAdding = !!child.ownerCt;
function handleCmp(cmp) {
var isLabelable = cmp.isFieldLabelable,
isField = cmp.isFormField;
if (isLabelable || isField) {
if (isLabelable) {
me['onLabelable' + (isAdding ? 'Added' : 'Removed')](cmp);
}
if (isField) {
me['onField' + (isAdding ? 'Added' : 'Removed')](cmp);
}
}
else if (cmp.isContainer) {
Ext.Array.forEach(cmp.getRefItems(), handleCmp);
}
}
handleCmp(child);
},
<span id='Ext-form-FieldAncestor-method-onLabelableAdded'> /**
</span> * Called when a {@link Ext.form.Labelable} instance is added to the container's subtree.
* @param {Ext.form.Labelable} labelable The instance that was added
* @protected
*/
onLabelableAdded: function(labelable) {
var me = this;
// buffer slightly to avoid excessive firing while sub-fields are changing en masse
me.mon(labelable, 'errorchange', me.handleFieldErrorChange, me, {buffer: 10});
labelable.setFieldDefaults(me.fieldDefaults);
},
<span id='Ext-form-FieldAncestor-method-onFieldAdded'> /**
</span> * Called when a {@link Ext.form.field.Field} instance is added to the container's subtree.
* @param {Ext.form.field.Field} field The field which was added
* @protected
*/
onFieldAdded: function(field) {
var me = this;
me.mon(field, 'validitychange', me.handleFieldValidityChange, me);
},
<span id='Ext-form-FieldAncestor-method-onLabelableRemoved'> /**
</span> * Called when a {@link Ext.form.Labelable} instance is removed from the container's subtree.
* @param {Ext.form.Labelable} labelable The instance that was removed
* @protected
*/
onLabelableRemoved: function(labelable) {
var me = this;
me.mun(labelable, 'errorchange', me.handleFieldErrorChange, me);
},
<span id='Ext-form-FieldAncestor-method-onFieldRemoved'> /**
</span> * Called when a {@link Ext.form.field.Field} instance is removed from the container's subtree.
* @param {Ext.form.field.Field} field The field which was removed
* @protected
*/
onFieldRemoved: function(field) {
var me = this;
me.mun(field, 'validitychange', me.handleFieldValidityChange, me);
},
<span id='Ext-form-FieldAncestor-method-handleFieldValidityChange'> /**
</span> * @private Handle validitychange events on sub-fields; invoke the aggregated event and method
*/
handleFieldValidityChange: function(field, isValid) {
var me = this;
me.fireEvent('fieldvaliditychange', me, field, isValid);
me.onFieldValidityChange(field, isValid);
},
<span id='Ext-form-FieldAncestor-method-handleFieldErrorChange'> /**
</span> * @private Handle errorchange events on sub-fields; invoke the aggregated event and method
*/
handleFieldErrorChange: function(labelable, activeError) {
var me = this;
me.fireEvent('fielderrorchange', me, labelable, activeError);
me.onFieldErrorChange(labelable, activeError);
},
<span id='Ext-form-FieldAncestor-method-onFieldValidityChange'> /**
</span> * Fired when the validity of any field within the container changes.
* @param {Ext.form.field.Field} field The sub-field whose validity changed
* @param {Boolean} valid The new validity state
* @protected
*/
onFieldValidityChange: Ext.emptyFn,
<span id='Ext-form-FieldAncestor-method-onFieldErrorChange'> /**
</span> * Fired when the error message of any field within the container changes.
* @param {Ext.form.Labelable} field The sub-field whose active error changed
* @param {String} error The new active error message
* @protected
*/
onFieldErrorChange: Ext.emptyFn
});</pre>
</body>
</html>