Class CQ.Ext.form.TwinTriggerField

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout (or subclass thereof). based layout manager, for example:

See CQ.Ext.layout.AnchorLayout.anchor also.

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout manager. Defaults to false.

Note: Although many components inherit this config option, not all will function as expected with a height of 'auto'. Setting autoHeight:true means that the browser will manage height based on the element's contents, and that Ext will not manage it at all.

If the browser is managing the height, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the height might result in elements needing to be synchronized with the new height. Example:

var w = new CQ.Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();

The maximum value in pixels which this BoxComponent will set its width to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this BoxComponent will set its width to.

Warning: This will override any size management applied by layout managers.

The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide field clearing (defaults to 'x-form-clear-left').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. CQ.Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See CQ.Ext.layout.FormLayout.fieldTpl also.

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

• Description :
  This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
• Notes :
  The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
  The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.
  Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

The text to display below this component (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

See also fieldLabel.

The text to display below the fieldLabel (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

See also fieldLabel.

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting this to true will cause the field to not reserve that space.

Note: see the note for clearCls.

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. CQ.Ext.form.FormPanel or specifying layout:'form').

An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at the field level will override the default itemCls supplied at the container level. The value specified for itemCls will be added to the default class ('x-form-item').

Since it is applied to the item wrapper (see CQ.Ext.layout.FormLayout.fieldTpl), it allows you to write standard CSS rules that can apply to the field, the label (if specified), or any other element within the markup for the field.

Note: see the note for fieldLabel.

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

Note: see the note for clearCls.

Also see hideLabel and CQ.Ext.layout.FormLayout.fieldTpl.

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='
    }]
});

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses.

An object containing margins to apply to this BoxComponent in the format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:

Defaults to:

{top:0, right:0, bottom:0, left:0}

var myField = new CQ.Ext.form.NumberField({
    id: 'mobile',
    anchor:'90%',
    fieldLabel: 'Mobile',
    maxLength: 16, // for validation
    autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}
});

A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

The ancestor axis can be traversed by using '/' characters in the path. For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:

var myGrid = new CQ.Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
//          The button reference is in the GridPanel
            myGrid.saveButton.enable();
        }
    }
});

In the code above, if the ref had been 'saveButton' the reference would have been placed into the Toolbar. Each '/' in the ref moves up one level from the Component's ownerCt.

Also see the added and removed events.

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

See render also.

An array of events that, when fired, should trigger this component to save its state (defaults to none). stateEvents may be any type of event supported by this component, including browser or custom events (e.g., ['click', 'customerchange']).

See stateful for an explanation of saving and restoring Component state.

A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startup. The component must have either a stateId or id assigned for state to be managed. Auto-generated ids are not guaranteed to be stable across page loads and cannot be relied upon to save and restore the same state for a component.

For state saving to work, the state manager's provider must have been set to an implementation of CQ.Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, CQ.Ext.state.CookieProvider is available.

To set the state provider for the current page:

CQ.Ext.state.Manager.setProvider(new CQ.Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

A stateful Component attempts to save state when one of the events listed in the stateEvents configuration fires.

To save state, a stateful Component first serializes its state by calling getState. By default, this function does nothing. The developer must provide an implementation which returns an object hash which represents the Component's restorable state.

The value yielded by getState is passed to CQ.Ext.state.Manager.set which uses the configured CQ.Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling CQ.Ext.state.Manager.get passing the stateId, or, if that is not specified, the id.

The resulting object is passed to applyState. The default implementation of applyState simply copies properties into the object, but a developer may override this to support more behaviour.

You can perform extra processing on state save and restore by attaching handlers to the beforestaterestore, staterestore, beforestatesave and statesave events.

new CQ.Ext.Panel({
    title: 'Some Title',
    renderTo: CQ.Ext.getBody(),
    width: 400, height: 300,
    layout: 'form',
    items: [{
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new CQ.Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});

A custom validation function to be called during field validation (validateValue) (defaults to null). If specified, this function will be called first, allowing the developer to override the default validation process.

This function will be passed the following Parameters:

This function is to Return: