Class CQ.Ext.form.TriggerField

Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component.

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes CQ.Ext.Component, CQ.Ext.BoxComponent, and CQ.Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}

true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).

True to use width:'auto', false to use fixed width (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 width of 'auto'. Setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.

If the browser is managing the width, 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 width might result in elements needing to be synchronized with the new width. For example, where the target element is:

<div id='grid-container' style='margin-left:25%;width:50%'></div>

A Panel rendered into that target element must listen for browser window resize in order to relay its child items when the browser changes its width:

var myPanel = new CQ.Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});

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

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

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

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

An array of events that, when fired, should be bubbled to any parent container. See CQ.Ext.util.Observable.enableBubble. Defaults to [].

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for adding customized styles to the component or any of its children using standard CSS rules.

An optional extra CSS class that will be added to this component's container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See CQ.Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

To configure the above Class with an extra CSS class append to the default. For example, for BoxLayout (Hbox and Vbox):

ctCls: 'x-box-layout-ct custom-class'

The default value is set on processRecord when the record does not contain an according value.

The default text to place into an empty field (defaults to null). Note: that this value will be submitted to the server if this field is enabled and configured with a name.

The label text to display next to 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 (e.g. CQ.Ext.form.FormPanel or specifying layout:'form').

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

Example use:

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

Note: this config is only used when this Component is rendered by a Container which has been configured to use a BoxLayout. Each child Component with a flex property will be flexed either vertically (by a VBoxLayout) or horizontally (by an HBoxLayout) according to the item's relative flex value compared to the sum of all Components with flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).

The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see anchor.

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.

Example use:

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

True to hide and show the component's container when hide/show is called on the component, false to hide and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide button on a window by setting hide:true on the button when adding it to its parent container.

An HTML fragment, or a DomHelper specification to use as the layout element content (defaults to ''). The HTML content is added after the component is rendered, so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.

True to avoid processing data on CQ.Dialog.loadContent (defaults to false).

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.

Example use:

// 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:

To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

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

Example use:

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}

Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back tracking. To restrict the maximum number of characters that can be entered into the field use autoCreate to add any attributes you want to a field, for example:

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'}
});

Minimum input field length required (defaults to 0)

Experimental The effect used when displaying a validation message under the field (defaults to 'normal').

The field's HTML name attribute (defaults to ''). Note: this property must be set if this field is to be automatically included with form submit().

An object or array of objects that will provide custom functionality for this component. The only requirement for a valid plugin is that it contain an init method that accepts a reference of type CQ.Ext.Component. When a component is created, if any plugins are available, the component will call the init method on each plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide its functionality.

The registered ptype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a Plugin is being specified not as a fully instantiated Component, but as a Component config object. The ptype will be looked up at render time up to determine what type of Plugin to create.

If you create your own Plugins, you may register them using CQ.Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.

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.

The error text to display if regex is used and the test fails during validation (defaults to '')

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.

A custom style specification to be applied to this component's Element. Should be a valid argument to CQ.Ext.Element.applyStyles.

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'
            }
        })
    ]
});

The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).

An CQ.Ext.Template, CQ.Ext.XTemplate or an array of strings to form an CQ.Ext.XTemplate. Used in conjunction with the data and tplWriteMode configurations.

A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Note: only applies if vtype is set, else ignored.

The registered xtype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a child item of a Container is being specified not as a fully instantiated Component, but as a Component config object. The xtype will be looked up at render time up to determine what type of child Component to create.

The predefined xtypes are listed here.

If you subclass Components to create your own Components, you may register them using CQ.Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.