Sencha Documentation

Ext.form.CompositeField

Overview
Composite field allowing a number of form Fields to be rendered on the same row. The fields are rendered using an hbox layout internally, so all of the normal HBox layout config items are available. Example usage: 
{
    xtype: 'compositefield',
    labelWidth: 120
    items: [
        {
            xtype     : 'textfield',
            fieldLabel: 'Title',
            width     : 20
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'First',
            flex      : 1
        },
        {
            xtype     : 'textfield',
            fieldLabel: 'Last',
            flex      : 1
        }
    ]
}
In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself: 
{
    xtype: 'compositefield',
    fieldLabel: 'Custom label',
    items: [...]
}
Any Ext.form.* component can be placed inside a composite field.

Config Options

 
labelConnector : String
The string to use when joining segments of the built label together (defaults to ', ')
The string to use when joining segments of the built label together (defaults to ', ')

Properties

 
combineErrors : Boolean True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true)
 
defaultMargins : String The margins to apply by default to each field in the composite
 
fieldErrors : Ext.util.MixedCollection MixedCollection of current errors on the Composite's subfields. This is used internally to track when to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's add, remove and replace events to update the error icon in the UI as errors are added or removed.
 
isComposite : Boolean Signifies that this is a Composite field
 
skipLastItemMargin : Boolean If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true)

Methods

 
buildCombinedErrorMessage( Array errors ) : String
Takes an object containing error messages for contained fields, returning a combined error string (defaults to just p...
Takes an object containing error messages for contained fields, returning a combined error string (defaults to just placing each item on a new line). This can be overridden to provide custom combined error message handling.

Parameters

  • errors : Array
    Array of errors in format: [{field: 'title', error: 'some error'}]

Returns

  • String   The combined error message
 
buildLabel( Array segments ) : String
Builds a label string from an array of subfield labels. By default this just joins the labels together with a comma
Builds a label string from an array of subfield labels. By default this just joins the labels together with a comma

Parameters

  • segments : Array
    Array of each of the labels in the composite field's subfields

Returns

  • String   The built label
 
clearInvalidChildren : Void
Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called as fiel...
Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called as fields usually take care of clearing themselves
 
isDirty : Boolean
Checks each field in the composite and returns true if any is dirty
Checks each field in the composite and returns true if any is dirty
 
onFieldClearInvalid( Ext.form.Field field ) : Void
Called if combineErrors is true and a subfield's clearInvalid method is called. By default this just updates the inte...
Called if combineErrors is true and a subfield's clearInvalid method is called. By default this just updates the internal fieldErrors MixedCollection.

Parameters

  • field : Ext.form.Field
    The field that was marked invalid

Returns

  • Void
 
onFieldMarkInvalid( Ext.form.Field field, String message ) : Void
Called if combineErrors is true and a subfield's markInvalid method is called. By default this just adds the subfield...
Called if combineErrors is true and a subfield's markInvalid method is called. By default this just adds the subfield's error to the internal fieldErrors MixedCollection

Parameters

  • field : Ext.form.Field
    The field that was marked invalid
  • message : String
    The error message

Returns

  • Void
 
reset : Void
Resets each field in the composite to their previous value
Resets each field in the composite to their previous value
 
sortErrors : Void
Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined. This is called before di...
Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined. This is called before displaying errors to ensure that the errors are presented in the expected order. This function can be overridden to provide a custom sorting order if needed.
 
validateValue : Boolean
Performs validation checks on each subfield and returns false if any of them fail validation.
Performs validation checks on each subfield and returns false if any of them fail validation.
© 2011 Sencha Inc.