Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Field
        CompositeField

Class Ext.form.CompositeField

Package:Ext.form
Defined In:CompositeField.js
Class:CompositeField
Extends:Field
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

Config OptionsDefined By
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 cls : String
A custom CSS class to apply to the field's underlying element (defaults to '').
Field
 data : Mixed
The initial set of data to apply to the tpl to update the content area of the Component.
Component
 defaults : Object
Any default properties to assign to the child fields.
CompositeField
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 fieldClass : String
The default CSS class for the field (defaults to 'x-form-field')
Field
 focusClass : String
The CSS class to use when the field receives focus (defaults to 'x-form-focus')
Field
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 invalidClass : String
The CSS class to use when marking a field invalid (defaults to 'x-form-invalid')
Field
 labelConnector : String
The string to use when joining segments of the built label together (defaults to ', ')
CompositeField
 msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 preventMark : Boolean
true to disable marking the field invalid. Defaults to false.
Field
 submitValue : Boolean
False to clear the name attribute on the field so that it is not submitted during a form post. Defaults to true.
Field
 validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
 validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
 value : Mixed
A value to initialize this field with (defaults to undefined).
Field
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 combineErrors : Boolean True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true)
CompositeField
 defaultMargins : String The margins to apply by default to each field in the composite
CompositeField
 disabled : Boolean
True if this component is disabled. Read-only.
Component
 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.
CompositeField
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 innerCt : Ext.Container A container configured with hbox layout which is responsible for laying out the subfields
CompositeField
 isComposite : Boolean Signifies that this is a Composite field
CompositeField
 items : Ext.util.MixedCollection Internal collection of all of the subfields in this Composite
CompositeField
 rendered : Boolean
True if this component has been rendered. Read-only.
Component
 skipLastItemMargin : Boolean If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true)
CompositeField

Public Methods

MethodDefined By

Public Events

EventDefined By