3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>The source code</title>
5 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <body onload="prettyPrint();">
9 <pre class="prettyprint lang-js">/*!
10 * Ext JS Library 3.3.0
11 * Copyright(c) 2006-2010 Ext JS, Inc.
13 * http://www.extjs.com/license
15 <div id="cls-Ext.form.CompositeField"></div>/**
16 * @class Ext.form.CompositeField
17 * @extends Ext.form.Field
18 * Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered
19 * using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage:
22 xtype: 'compositefield',
43 * In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels
44 * of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself:
47 xtype: 'compositefield',
48 fieldLabel: 'Custom label',
52 * Any Ext.form.* component can be placed inside a composite field.
54 Ext.form.CompositeField = Ext.extend(Ext.form.Field, {
56 <div id="prop-Ext.form.CompositeField-defaultMargins"></div>/**
57 * @property defaultMargins
59 * The margins to apply by default to each field in the composite
61 defaultMargins: '0 5 0 0',
63 <div id="prop-Ext.form.CompositeField-skipLastItemMargin"></div>/**
64 * @property skipLastItemMargin
66 * If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true)
68 skipLastItemMargin: true,
70 <div id="prop-Ext.form.CompositeField-isComposite"></div>/**
71 * @property isComposite
73 * Signifies that this is a Composite field
77 <div id="prop-Ext.form.CompositeField-combineErrors"></div>/**
78 * @property combineErrors
80 * True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true)
84 <div id="cfg-Ext.form.CompositeField-labelConnector"></div>/**
85 * @cfg {String} labelConnector The string to use when joining segments of the built label together (defaults to ', ')
89 <div id="cfg-Ext.form.CompositeField-defaults"></div>/**
90 * @cfg {Object} defaults Any default properties to assign to the child fields.
94 //Builds the composite field label
95 initComponent: function() {
100 for (var i=0, j = items.length; i < j; i++) {
103 labels.push(item.fieldLabel);
106 Ext.applyIf(item, this.defaults);
108 //apply default margins to each item except the last
109 if (!(i == j - 1 && this.skipLastItemMargin)) {
110 Ext.applyIf(item, {margins: this.defaultMargins});
114 this.fieldLabel = this.fieldLabel || this.buildLabel(labels);
116 <div id="prop-Ext.form.CompositeField-fieldErrors"></div>/**
117 * @property fieldErrors
118 * @type Ext.util.MixedCollection
119 * MixedCollection of current errors on the Composite's subfields. This is used internally to track when
120 * to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's
121 * add, remove and replace events to update the error icon in the UI as errors are added or removed.
123 this.fieldErrors = new Ext.util.MixedCollection(true, function(item) {
127 this.fieldErrors.on({
129 add : this.updateInvalidMark,
130 remove : this.updateInvalidMark,
131 replace: this.updateInvalidMark
134 Ext.form.CompositeField.superclass.initComponent.apply(this, arguments);
136 this.innerCt = new Ext.Container({
139 cls : 'x-form-composite',
140 defaultMargins: '0 3 0 0'
143 var fields = this.innerCt.findBy(function(c) {
144 return c.isFormField;
147 <div id="prop-Ext.form.CompositeField-items"></div>/**
149 * @type Ext.util.MixedCollection
150 * Internal collection of all of the subfields in this Composite
152 this.items = new Ext.util.MixedCollection();
153 this.items.addAll(fields);
159 * Creates an internal container using hbox and renders the fields to it
161 onRender: function(ct, position) {
163 <div id="prop-Ext.form.CompositeField-innerCt"></div>/**
165 * @type Ext.Container
166 * A container configured with hbox layout which is responsible for laying out the subfields
168 var innerCt = this.innerCt;
171 this.el = innerCt.getEl();
173 //if we're combining subfield errors into a single message, override the markInvalid and clearInvalid
174 //methods of each subfield and show them at the Composite level instead
175 if (this.combineErrors) {
176 this.eachItem(function(field) {
178 markInvalid : this.onFieldMarkInvalid.createDelegate(this, [field], 0),
179 clearInvalid: this.onFieldClearInvalid.createDelegate(this, [field], 0)
184 //set the label 'for' to the first item
185 var l = this.el.parent().parent().child('label', true);
187 l.setAttribute('for', this.items.items[0].id);
191 Ext.form.CompositeField.superclass.onRender.apply(this, arguments);
194 <div id="method-Ext.form.CompositeField-onFieldMarkInvalid"></div>/**
195 * Called if combineErrors is true and a subfield's markInvalid method is called.
196 * By default this just adds the subfield's error to the internal fieldErrors MixedCollection
197 * @param {Ext.form.Field} field The field that was marked invalid
198 * @param {String} message The error message
200 onFieldMarkInvalid: function(field, message) {
201 var name = field.getName(),
204 errorName: field.fieldLabel || name,
208 this.fieldErrors.replace(name, error);
210 field.el.addClass(field.invalidClass);
213 <div id="method-Ext.form.CompositeField-onFieldClearInvalid"></div>/**
214 * Called if combineErrors is true and a subfield's clearInvalid method is called.
215 * By default this just updates the internal fieldErrors MixedCollection.
216 * @param {Ext.form.Field} field The field that was marked invalid
218 onFieldClearInvalid: function(field) {
219 this.fieldErrors.removeKey(field.getName());
221 field.el.removeClass(field.invalidClass);
226 * Called after a subfield is marked valid or invalid, this checks to see if any of the subfields are
227 * currently invalid. If any subfields are invalid it builds a combined error message marks the composite
228 * invalid, otherwise clearInvalid is called
230 updateInvalidMark: function() {
231 var ieStrict = Ext.isIE6 && Ext.isStrict;
233 if (this.fieldErrors.length == 0) {
236 //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it
238 this.clearInvalid.defer(50, this);
241 var message = this.buildCombinedErrorMessage(this.fieldErrors.items);
244 this.markInvalid(message);
246 //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it
248 this.markInvalid(message);
253 <div id="method-Ext.form.CompositeField-validateValue"></div>/**
254 * Performs validation checks on each subfield and returns false if any of them fail validation.
255 * @return {Boolean} False if any subfield failed validation
257 validateValue: function() {
260 this.eachItem(function(field) {
261 if (!field.isValid()) valid = false;
267 <div id="method-Ext.form.CompositeField-buildCombinedErrorMessage"></div>/**
268 * Takes an object containing error messages for contained fields, returning a combined error
269 * string (defaults to just placing each item on a new line). This can be overridden to provide
270 * custom combined error message handling.
271 * @param {Array} errors Array of errors in format: [{field: 'title', error: 'some error'}]
272 * @return {String} The combined error message
274 buildCombinedErrorMessage: function(errors) {
278 for (var i = 0, j = errors.length; i < j; i++) {
281 combined.push(String.format("{0}: {1}", error.errorName, error.error));
284 return combined.join("<br />");
287 <div id="method-Ext.form.CompositeField-sortErrors"></div>/**
288 * Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined.
289 * This is called before displaying errors to ensure that the errors are presented in the expected order.
290 * This function can be overridden to provide a custom sorting order if needed.
292 sortErrors: function() {
293 var fields = this.items;
295 this.fieldErrors.sort("ASC", function(a, b) {
296 var findByName = function(key) {
297 return function(field) {
298 return field.getName() == key;
302 var aIndex = fields.findIndexBy(findByName(a.field)),
303 bIndex = fields.findIndexBy(findByName(b.field));
305 return aIndex < bIndex ? -1 : 1;
309 <div id="method-Ext.form.CompositeField-reset"></div>/**
310 * Resets each field in the composite to their previous value
313 this.eachItem(function(item) {
317 // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
318 // Important because reset is being called on both the group and the individual items.
324 <div id="method-Ext.form.CompositeField-clearInvalidChildren"></div>/**
325 * Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called
326 * as fields usually take care of clearing themselves
328 clearInvalidChildren: function() {
329 this.eachItem(function(item) {
334 <div id="method-Ext.form.CompositeField-buildLabel"></div>/**
335 * Builds a label string from an array of subfield labels.
336 * By default this just joins the labels together with a comma
337 * @param {Array} segments Array of each of the labels in the composite field's subfields
338 * @return {String} The built label
340 buildLabel: function(segments) {
341 return Ext.clean(segments).join(this.labelConnector);
344 <div id="method-Ext.form.CompositeField-isDirty"></div>/**
345 * Checks each field in the composite and returns true if any is dirty
346 * @return {Boolean} True if any field is dirty
349 //override the behaviour to check sub items.
350 if (this.disabled || !this.rendered) {
355 this.eachItem(function(item){
366 * Convenience function which passes the given function to every item in the composite
367 * @param {Function} fn The function to call
368 * @param {Object} scope Optional scope object
370 eachItem: function(fn, scope) {
371 if(this.items && this.items.each){
372 this.items.each(fn, scope || this);
378 * Passes the resize call through to the inner panel
380 onResize: function(adjWidth, adjHeight, rawWidth, rawHeight) {
381 var innerCt = this.innerCt;
383 if (this.rendered && innerCt.rendered) {
384 innerCt.setSize(adjWidth, adjHeight);
387 Ext.form.CompositeField.superclass.onResize.apply(this, arguments);
392 * Forces the internal container to be laid out again
394 doLayout: function(shallow, force) {
396 var innerCt = this.innerCt;
398 innerCt.forceLayout = this.ownerCt.forceLayout;
399 innerCt.doLayout(shallow, force);
406 beforeDestroy: function(){
407 Ext.destroy(this.innerCt);
409 Ext.form.CompositeField.superclass.beforeDestroy.call(this);
412 //override the behaviour to check sub items.
413 setReadOnly : function(readOnly) {
414 if (readOnly == undefined) {
417 readOnly = !!readOnly;
420 this.eachItem(function(item){
421 item.setReadOnly(readOnly);
424 this.readOnly = readOnly;
427 onShow : function() {
428 Ext.form.CompositeField.superclass.onShow.call(this);
432 //override the behaviour to check sub items.
433 onDisable : function(){
434 this.eachItem(function(item){
439 //override the behaviour to check sub items.
440 onEnable : function(){
441 this.eachItem(function(item){
447 Ext.reg('compositefield', Ext.form.CompositeField);</pre>