alignSelf : String

<ext-combobox/> <ext-comboboxfield alignSelf="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.alignSelf = 'value';
let alignSelf = element.alignSelf;

Specifies the self alignment of this widget in a box layout

Defaults to:

null

alignTarget : String

immutable imm

<ext-combobox/> <ext-comboboxfield alignTarget="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.alignTarget = 'value';
let alignTarget = element.alignTarget;

The element reference to which the picker aligns and sizes to. By default, it sizes to the bodyElement which encapsulates the input field and triggers.

An alternate value which may be useful if using floated pickers on phone platforms could be el, to align the picker to the field's encapsulating element.

Defaults to:

'bodyElement'

alwaysOnTop : Boolean / Number

<ext-combobox/> <ext-comboboxfield alwaysOnTop="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.alwaysOnTop = true;
let alwaysOnTop = element.alwaysOnTop;

A flag indicating that this component should be above its floated siblings.

This may be a positive number to prioritize the ordering of multiple visible always on top components.

This may be set to a negative number to prioritize a component to the bottom of the z-index stack.

Defaults to:

false

Available since: 6.2.0

animateUnderline : Boolean

<ext-combobox/> <ext-comboboxfield animateUnderline="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.animateUnderline = true;
let animateUnderline = element.animateUnderline;

'true' to animate the underline of a field when focused

Defaults to:

false

ariaAttributes : Object

<ext-combobox/> <ext-comboboxfield ariaAttributes="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.ariaAttributes = { };
let ariaAttributes = element.ariaAttributes;

An object containing ARIA attributes to be set on this Component's ARIA element. Use this to set the attributes that cannot be determined by the Component's state, such as aria-live, aria-flowto, etc.

Note that this config is only meaningful at the Component rendering time, and setting it after that will do nothing.

Defaults to:

null

ariaDescribedBy : String

immutable imm

<ext-combobox/> <ext-comboboxfield ariaDescribedBy="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.ariaDescribedBy = 'value';
let ariaDescribedBy = element.ariaDescribedBy;

DOM selector for a child element that is to be used as description for this Component, set in aria-describedby attribute. The selector works the same way as ariaLabelledBy.

ariaLabel : String

immutable imm

<ext-combobox/> <ext-comboboxfield ariaLabel="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.ariaLabel = 'value';
let ariaLabel = element.ariaLabel;

ARIA label for this Component. It is best to use ariaLabelledBy option instead, because screen readers prefer aria-labelledby attribute to aria-label. ariaLabel and ariaLabelledBy config options are mutually exclusive.

ariaLabelledBy : String

immutable imm

<ext-combobox/> <ext-comboboxfield ariaLabelledBy="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.ariaLabelledBy = 'value';
let ariaLabelledBy = element.ariaLabelledBy;

DOM selector for a child element that is to be used as label for this Component, set in aria-labelledby attribute. If the selector is by id, the label element can be any existing element, not necessarily a child of the main Component element.

ariaLabelledBy and ariaLabel config options are mutually exclusive, and ariaLabelledBy has the higher precedence.

ariaRole : String

readonly ro

<ext-combobox/> <ext-comboboxfield ariaRole="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let ariaRole = element.ariaRole;

ARIA role for this Component, defaults to no role. With no role, no other ARIA attributes are set.

autoCapitalize : Boolean

<ext-combobox/> <ext-comboboxfield autoCapitalize="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoCapitalize = true;
let autoCapitalize = element.autoCapitalize;

True to set the field's DOM element auto-capitalize attribute to "on", false to set to "off".

Defaults to:

null

autoComplete : Boolean

<ext-combobox/> <ext-comboboxfield autoComplete="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoComplete = true;
let autoComplete = element.autoComplete;

Autocomplete is disabled on Picker fields by default.

Defaults to:

false

autoCorrect : Boolean

<ext-combobox/> <ext-comboboxfield autoCorrect="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoCorrect = true;
let autoCorrect = element.autoCorrect;

True to set the field DOM element autocorrect attribute to "on", false to set to "off".

Defaults to:

null

autoFitErrors : Boolean

<ext-combobox/> <ext-comboboxfield autoFitErrors="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoFitErrors = true;
let autoFitErrors = element.autoFitErrors;

Whether to adjust the field's body width to make room for the error messages.

Defaults to:

true

autoFocus : Boolean

<ext-combobox/> <ext-comboboxfield autoFocus="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoFocus = true;
let autoFocus = element.autoFocus;

true to automatically focus the first result gathered by the data store in the dropdown list when it is opened. A false value would cause nothing in the list to be highlighted automatically, so the user would have to manually highlight an item before pressing the enter or tab key to select it (unless the value of (typeAhead) were true), or use the mouse to select a value.

Defaults to:

true

autoFocusLast : Boolean

<ext-combobox/> <ext-comboboxfield autoFocusLast="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoFocusLast = true;
let autoFocusLast = element.autoFocusLast;

When true, the last selected record in the dropdown list will be re-selected upon autoFocus. Set to false to always select the first record in the drop-down list. For accessible applications it is recommended to set this option to false.

Defaults to:

true

autoHideInputMask : Boolean

<ext-combobox/> <ext-comboboxfield autoHideInputMask="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoHideInputMask = true;
let autoHideInputMask = element.autoHideInputMask;

Specify as false to always show the inputMask.

Defaults to:

true

Available since: 6.5.0

autoLoadOnValue : Boolean

<ext-combobox/> <ext-comboboxfield autoLoadOnValue="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.autoLoadOnValue = true;
let autoLoadOnValue = element.autoLoadOnValue;

This option controls whether to initially load the store when a value is set so that the display value can be determined from the appropriate record.

The store will only be loaded in a limited set of circumstances:

• The store is not currently loading.
• The store does not have a pending Ext.data.Store#autoLoad.
• The store has not been loaded before.

Defaults to:

false

axisLock : Boolean

<ext-combobox/> <ext-comboboxfield axisLock="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.axisLock = true;
let axisLock = element.axisLock;

If true, then, when showBy or alignTo fallback on constraint violation only takes place along the major align axis.

That is, if alignment "l-r" is being used, and axisLock: true is used, then if constraints fail, only fallback to "r-l" is considered.

Defaults to:

null

badFormatMessage : String

immutable imm

<ext-combobox/> <ext-comboboxfield badFormatMessage="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.badFormatMessage = 'value';
let badFormatMessage = element.badFormatMessage;

The error message that will be displayed if the value cannot be parsed (for some derived types) or if the value does not match a configured inputMask.

Defaults to:

'Value does not match the required format'

Available since: 6.5.0

bind : Object / String

<ext-combobox/> <ext-comboboxfield bind="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.bind = 'value';
let bind = element.bind;

Setting this config option adds or removes data bindings for other configs. For example, to bind the title config:

 var panel = Ext.create({
     xtype: 'panel',
     bind: {
         title: 'Hello {user.name}'
     }
 });

To dynamically add bindings:

 panel.setBind({
     title: 'Greetings {user.name}!'
 });

To remove bindings:

 panel.setBind({
     title: null
 });

The bind expressions are presented to Ext.app.ViewModel#bind. The ViewModel instance is determined by lookupViewModel.

Note: If bind is passed as a string, it will use the Ext.Component#property-defaultBindProperty for the binding.

Defaults to:

null

border : Boolean

<ext-combobox/> <ext-comboboxfield border="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.border = true;
let border = element.border;

Enables or disables bordering on this component. The following values are accepted:

• null or `true (default): Do nothing and allow the border to be specified by the theme.
• false: suppress the default border provided by the theme.

Please note that enabling bordering via this config will not add a border-color or border-style CSS property to the component; you provide the border-color and border-style via CSS rule or style configuration (if not already provide by the theme).

Using style:

Ext.Viewport.add({
    centered: true,
    width: 100,
    height: 100,

    style: 'border: 1px solid blue;'
    // ...
});

Using CSS:

Ext.Viewport.add({
    centered: true,
    width: 100,
    height: 100,

    cls: 'my-component'
    // ...
});

And your CSS file:

.my-component {
    border: 1px solid red;
}

Defaults to:

null

bottom : Number / String

<ext-combobox/> <ext-comboboxfield bottom="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.bottom = 'value';
let bottom = element.bottom;

The absolute bottom position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

bubbleDirty : Boolean

<ext-combobox/> <ext-comboboxfield bubbleDirty="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.bubbleDirty = true;
let bubbleDirty = element.bubbleDirty;

Set to false to disable dirty states affecting ancestor containers such as fieldpanel or formpanel. The dirty state of such containers is based on the presence of dirty descendants. In some cases, however, it may be desired to hide the dirty state of one of these containers from its ancestor containers.

Defaults to:

true

Available since: 7.0

centered : Boolean

<ext-combobox/> <ext-comboboxfield centered="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.centered = true;
let centered = element.centered;

Configure this as true to have this Component centered within its Container. Setting this value to true will make this Component become 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

false

chipView

<ext-combobox/> <ext-comboboxfield chipView="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.chipView = 'value';
let chipView = element.chipView;

A configuration object which may be specified to configure the <ext-chipview/> used to display "tags" representing selected items when multiSelect is true.

Defaults to:

{
    xtype: 'chipview',
    tabIndex: null,
    focusable: false,
    itemsFocusable: false,
    focusedCls: '',
    navigationModel: 'fieldchipview',
    selectable: {
        mode: 'multi'
    },
    closable: true,
    closeHandler: 'up.onChipCloseTap'
}

Available since: 6.7.0

classCls

readonly ro

<ext-combobox/> <ext-comboboxfield classCls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.classCls = 'value';
let classCls = element.classCls;

A CSS class to apply to the main element that will be inherited down the class hierarchy. Subclasses may override this property on their prototype to add their own CSS class in addition to the CSS classes inherited from ancestor classes via the prototype chain. For example

Ext.define('Foo', {
    extend: 'Ext.Widget',
    classCls: 'foo'
});

Ext.define('Bar', {
    extend: 'Foo',
    classCls: 'bar'
});

var bar = new Bar();

console.log(bar.element.className); // outputs 'foo bar'

Defaults to:

Ext.baseCSSPrefix + 'selectfield'

clearable : Boolean

<ext-combobox/> <ext-comboboxfield clearable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.clearable = true;
let clearable = element.clearable;

true to show a clear trigger in this field when it has a non-empty value

Defaults to:

true

cls : String / String[]

<ext-combobox/> <ext-comboboxfield cls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.cls = 'value';
let cls = element.cls;

The CSS class to add to this widget's element, in addition to the baseCls. In many cases, this property will be specified by the derived widget class. See userCls for adding additional CSS classes to widget instances (such as items in a <ext-container/>).

Defaults to:

null

collapseOnSelect : Boolean

<ext-combobox/> <ext-comboboxfield collapseOnSelect="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.collapseOnSelect = true;
let collapseOnSelect = element.collapseOnSelect;

Has no effect if multiSelect is false

Configure as true to automatically hide the picker after a selection is made.

Defaults to:

false

constrainAlign : String / Ext.util.Region / Ext.dom.Element

<ext-combobox/> <ext-comboboxfield constrainAlign="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.constrainAlign = 'value';
let constrainAlign = element.constrainAlign;

A specification of the constraint to apply when showBy or alignTo is called to align a floated or positioned component.

Defaults to the parent container for positioned components (components which have their top, right, bottom or left set to move them out of their container's layout flow).

Defaults to the viewport for floated components.

May be a Ext.ComponentQuery selector to find an ancestor component to constrain within.

May be false to specify that constraining is not applied.

You may also specify an element, or a Ext.util.Region

Defaults to:

null

containsFocus : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield containsFocus="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let containsFocus = element.containsFocus;

true if this currently focused element is within this Component's or Container's hierarchy. This property is set separately from hasFocus, and can be true when hasFocus is false.

Examples:

• Text field with input element focused would be: focusable: true, hasFocus: true, containsFocus: true

• Date field with drop-down picker currently focused would be: focusable: true, hasFocus: false, containsFocus: true

• Form Panel with a child input field currently focused would be: focusable: false, hasFocus: false, containsFocus: true

See also hasFocus.

Defaults to:

false

contentEl : Ext.dom.Element / HTMLElement / String

<ext-combobox/> <ext-comboboxfield contentEl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.contentEl = 'value';
let contentEl = element.contentEl;

The configured element will automatically be added as the content of this component. When you pass a string, we expect it to be an element id. If the content element is hidden, we will automatically show it.

Defaults to:

null

controller : String / Object / Ext.app.ViewController

<ext-combobox/> <ext-comboboxfield controller="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.controller = 'value';
let controller = element.controller;

A string alias, a configuration object or an instance of a ViewController for this container. Sample usage:

Ext.define('MyApp.UserController', {
    alias: 'controller.user'
});

Ext.define('UserContainer', {
    extend: 'Ext.container.container',
    controller: 'user'
});
// Or
Ext.define('UserContainer', {
    extend: 'Ext.container.container',
    controller: {
        type: 'user',
        someConfig: true
    }
});

// Can also instance at runtime
var ctrl = new MyApp.UserController();
var view = new UserContainer({
    controller: ctrl
});

Defaults to:

null

data : Object

<ext-combobox/> <ext-comboboxfield data="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.data = { };
let data = element.data;

The initial set of data to apply to the tpl to update the content area of the Component.

Note: Data will be appended to any existing data.

Defaults to:

null

dataType : Ext.data.field.Field / Object / String

<ext-combobox/> <ext-comboboxfield dataType="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.dataType = 'value';
let dataType = element.dataType;

A config for a Ext.data.field.Field or data field sub-class instance used to serialize this field's value for form submission. This is used by the serialize method unless modelValidation is used, in which case, the data field of the bound Ext.data.Model is used.

For example:

 {
     xtype: 'datefield',
     dataType: {
         // type: 'date'  (datefield does this by default)
         dateWriteFormat: 'Y-m-d'
     }
 }

If this config is a string, it is used to create a Ext.data.field.Field by that alias.

Defaults to:

null

Available since: 7.0

defaultBindProperty : String

readonly ro

<ext-combobox/> <ext-comboboxfield defaultBindProperty="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.defaultBindProperty = 'value';
let defaultBindProperty = element.defaultBindProperty;

This property is used to determine the property of a bind config that is just the value. For example, if defaultBindProperty="value", then this shorthand bind config:

 bind: '{name}'

Is equivalent to this object form:

 bind: {
     value: '{name}'
 }

The defaultBindProperty is set to "value" for form fields and to "store" for grids and trees.

Defaults to:

'value'

defaultListenerScope : Boolean

<ext-combobox/> <ext-comboboxfield defaultListenerScope="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.defaultListenerScope = true;
let defaultListenerScope = element.defaultListenerScope;

If true, this component will be the default scope (this pointer) for events specified with string names so that the scope can be dynamically resolved. The component will automatically become the defaultListenerScope if a controller is specified.

See the introductory docs for Ext.container.Container for some sample usages.

NOTE: This value can only be reliably set at construction time. Setting it after that time may not correctly rewire all of the potentially effected listeners.

Defaults to:

false

delimiter : String

<ext-combobox/> <ext-comboboxfield delimiter="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.delimiter = 'value';
let delimiter = element.delimiter;

The character(s) used to separate new values to be added when createNewOnEnter or createNewOnBlur are set.

Only meaningful when multiSelect is true.

Defaults to:

','

destroyed : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield destroyed="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.destroyed = true;
let destroyed = element.destroyed;

This property is set to true after the destroy method is called.

Defaults to:

false

dirty : Boolean

<ext-combobox/> <ext-comboboxfield dirty="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.dirty = true;
let dirty = element.dirty;

This config property describes the modified state of this component. In most cases this config's value is maintained by the component and should be considered readonly. The class implementor should be the only one to call the setter.

For containers, this config will be updated on a short delay in some cases.

Defaults to:

false

Available since: 7.0

disabled : Boolean

<ext-combobox/> <ext-comboboxfield disabled="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.disabled = true;
let disabled = element.disabled;

true to disable the field.

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Defaults to:

false

displayField : String / Number

<ext-combobox/> <ext-comboboxfield displayField="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.displayField = 'value';
let displayField = element.displayField;

The underlying data value name to bind to this Select control. If configured as null, the valueField is used.

This resolved value is the visibly rendered value of the available selection options.

Defaults to:

'text'

displayTpl : String / String[] / Ext.XTemplate

<ext-combobox/> <ext-comboboxfield displayTpl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.displayTpl = 'value';
let displayTpl = element.displayTpl;

The template to be used to display the selected record inside the text field.

If not specified, the displayField is shown in the text field.

Defaults to:

null

displayed : Boolean

<ext-combobox/> <ext-comboboxfield displayed="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.displayed = true;
let displayed = element.displayed;

Set to true to call show and false to call hide. Unlike the hidden config, changing this config will potentially involve animations to show or hide the component.

Defaults to:

null

Available since: 6.5.0

docked : String

<ext-combobox/> <ext-comboboxfield docked="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.docked = 'value';
let docked = element.docked;

The dock position of this component in its container. Can be left, top, right or bottom.

Notes

You must use a HTML5 doctype for docked bottom to work. To do this, simply add the following code to the HTML file:

<!doctype html>

So your index.html file should look a little like this:

<!doctype html>
<html>
    <head>
        <title>MY application title</title>
        ...

Defaults to:

null

draggable : Boolean / Object / Ext.drag.Source

<ext-combobox/> <ext-comboboxfield draggable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.draggable = true;
let draggable = element.draggable;

Set to true to allow this component to be dragged. This can also be the config object for the Ext.drag.Source that will manage the drag.

Defaults to:

null

edgePicker : Object

<ext-combobox/> <ext-comboboxfield edgePicker="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.edgePicker = { };
let edgePicker = element.edgePicker;

A configuration object, containing an cfg#xtype property which specifies the widget to create if picker: 'edge' (or if it's 'auto' and the app is on a phone).

Replaces defaultPhonePicker

Defaults to:

{
    xtype: 'selectpicker',
    cover: true
}

error : String / String[]

<ext-combobox/> <ext-comboboxfield error="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.error = 'value';
let error = element.error;

The error (or errors) to display for this field. This config is typically set by the field's validators but can be set directly if an error needs to be associated with a field manually.

Errors will be HTML encoded as necessary and errorTpl before becoming the current errorMessage.

Defaults to:

null

Available since: 6.5.0

errorMessage : String

<ext-combobox/> <ext-comboboxfield errorMessage="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.errorMessage = 'value';
let errorMessage = element.errorMessage;

The field's error message to display as errorTarget. This message must already be properly formatted and encoded as appropriate for the errorTarget.

Defaults to:

null

Available since: 6.5.0

errorTarget : String

<ext-combobox/> <ext-comboboxfield errorTarget="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.errorTarget = 'value';
let errorTarget = element.errorTarget;

The location where the error message text should display.

The following are values that have predefined meaning:

• qtip Display a Ext.tip.Manager containing the message when the user hovers (or taps) the field. For this option to work, quick tips must be enabled by calling Ext.tip.Manager#init.
• side Add an error icon to the right of the field, displaying the message in a popup on hover or tap.
• title Display the message in a default browser title attribute.
• under Add a div beneath the field containing the error message.

Defaults to:

'qtip'

Available since: 6.5.0

errorTip : Object

<ext-combobox/> <ext-comboboxfield errorTip="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.errorTip = { };
let errorTip = element.errorTip;

The default config that will be used to display errors in the tooltip.

Defaults to:

null

Available since: 6.5.0

errorTpl : String / String[] / Ext.XTemplate

<ext-combobox/> <ext-comboboxfield errorTpl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.errorTpl = 'value';
let errorTpl = element.errorTpl;

The template used to format the error set for this field. By default, the errorTarget is used to determine whether the error(s) are formatted as an HTML list or as plain text.

Defaults to:

null

Available since: 6.5.0

factoryConfig : Object

readonly ro

<ext-combobox/> <ext-comboboxfield factoryConfig="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.factoryConfig = { };
let factoryConfig = element.factoryConfig;

If this property is specified by the target class of this mixin its properties are used to configure the created Ext.Factory.

flex : Number / String / Object

<ext-combobox/> <ext-comboboxfield flex="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.flex = 'value';
let flex = element.flex;

The flex of this item if this item item is inside a Ext.layout.HBox or Ext.layout.VBox layout.

You can also update the flex of a component dynamically using the Ext.layout.FlexBox#setItemFlex method.

When supplied as a string or number this option supports the same syntax as CSS flex. For example:

flex: '1 2 auto'

sets flex-grow property to 0, flex-shrink to 2 and flex-basis to 'auto'.

The default flex-shrink value for box layout items is set to 0 in the stylesheet, which is different from the browser's default flex-shrink value of 1. This accommodates the majority use case for applications since where non-flexed components are typically not expected to shrink smaller than their default size.

For convenience when only a single number is supplied it is used as the value for both flex-grow and flex-shrink, for example flex: 3 is the same as flex: '3 3'

An object form is also accepted:

flex: {
    grow: 1,
    shrink: 2,
    basis: 'auto'
}

When the object form is supplied shrink always defaults to 0 regardless of the value of grow.

Although 'auto' is the default value for flex-basis, flex-basis defaults to 0% when flex is supplied as a single numeric or string value (e.g. flex: 1). If this behavior is not desired either explicitly set flex-basis to 'auto' or use the object form to set only grow and/or shrink:

flex: {
    grow: 2
}

Defaults to:

null

floated : Boolean

<ext-combobox/> <ext-comboboxfield floated="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.floated = true;
let floated = element.floated;

A Component may be floated above all other components in the application. This means that the component is absolutely positioned, and will move to the front and occlude other sibling floated component if clicked.

A Floated component may have floated descendants. It will bring these decendants to the front with it when brought to the front of its sibling floated components.

By default, descendant floated components are all positioned using the viewport coordinate system. To make a floating component a positioning parent for descendants, and have the ancestors positioned relatively, configure the parent floated component with cfg-relative: true.

Defaults to:

false

Available since: 6.2.0

floatedPicker : Object

<ext-combobox/> <ext-comboboxfield floatedPicker="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.floatedPicker = { };
let floatedPicker = element.floatedPicker;

A configuration object, containing an cfg#xtype property which specifies the widget to create if picker: 'floated' (or if it's 'auto' and the app is not on a phone).

Replaces defaultTabletPicker

Defaults to:

{
    xtype: 'boundlist',
    infinite: false,
    // BoundListNavigationModel binds to input field
    // Must only be enabled when list is visible
    navigationModel: {
        disabled: true
    },
    scrollToTopOnRefresh: false,
    loadingHeight: 70,
    maxHeight: 300,
    floated: true,
    axisLock: true,
    hideAnimation: null
}

floatedPickerAlign : String

<ext-combobox/> <ext-comboboxfield floatedPickerAlign="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.floatedPickerAlign = 'value';
let floatedPickerAlign = element.floatedPickerAlign;

*Only valud when the floatedPicker is used. The showBy alignment string to use when showing the floated picker by the input field.

Defaults to:

tl-bl?

floatingCls : String

readonly ro

<ext-combobox/> <ext-comboboxfield floatingCls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.floatingCls = 'value';
let floatingCls = element.floatingCls;

The CSS class to add to this component when it is floated at the viewport level.

Defaults to:

Ext.baseCSSPrefix + 'floating'

focusCls : String

immutable imm

<ext-combobox/> <ext-comboboxfield focusCls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.focusCls = 'value';
let focusCls = element.focusCls;

CSS class that will be added to focused component's focusClsEl, and removed when component blurs.

Defaults to:

'x-focused'

focusClsEl : Ext.dom.Element

readonly ro

<ext-combobox/> <ext-comboboxfield focusClsEl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.focusClsEl = 'value';
let focusClsEl = element.focusClsEl;

The element that will have the focusCls applied when component's focusEl is focused.

focusEl : Ext.dom.Element

readonly ro

<ext-combobox/> <ext-comboboxfield focusEl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.focusEl = 'value';
let focusEl = element.focusEl;

The element that will be focused when focus method is called on this component. Usually this is the same element that receives focus via mouse clicks, taps, and pressing Tab key.

Defaults to:

'el'

focusable : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield focusable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let focusable = element.focusable;

true for keyboard interactive Components or Widgets, false otherwise. For Containers, this property reflects interactiveness of the Container itself, not its children. See isFocusable.

Note: It is not enough to set this property to true to make a component keyboard interactive. You also need to make sure that the component's focusEl is reachable via Tab key (tabbable). See also tabIndex.

Defaults to:

false

hasFocus : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield hasFocus="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let hasFocus = element.hasFocus;

true if this component's focusEl is focused. See also containsFocus.

Defaults to:

false

hasListeners : Object

readonly ro

<ext-combobox/> <ext-comboboxfield hasListeners="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let hasListeners = element.hasListeners;

This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the Ext.app.EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event.

The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:

 if (this.hasListeners.foo) {
     this.fireEvent('foo', this, arg1);
 }

height : Number / String

<ext-combobox/> <ext-comboboxfield height="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.height = 'value';
let height = element.height;

The height of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. By default, if this is not explicitly set, this Component's element will simply have its own natural size. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

hidden : Boolean

<ext-combobox/> <ext-comboboxfield hidden="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.hidden = true;
let hidden = element.hidden;

Whether or not this Component is hidden (its CSS display property is set to none).

Defaults to true for floated Components.

Defaults to:

null

hiddenName : String

<ext-combobox/> <ext-comboboxfield hiddenName="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.hiddenName = 'value';
let hiddenName = element.hiddenName;

Specify a hiddenName if you're using the Ext.form.Panel#standardSubmit option. This name will be used to post the underlying value of the select to the server.

Defaults to:

null

hideAnimation : String / Mixed

<ext-combobox/> <ext-comboboxfield hideAnimation="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.hideAnimation = 'value';
let hideAnimation = element.hideAnimation;

Animation effect to apply when the Component is being hidden. Typically you want to use an outbound animation type such as 'fadeOut' or 'slideOut'. For more animations, check the Ext.fx.Animation#type config.

Defaults to:

null

hideMode : 'clip' / 'display' / 'offsets' / 'opacity' / 'visibility'

<ext-combobox/> <ext-comboboxfield hideMode="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.hideMode = 'value';
let hideMode = element.hideMode;

A String which specifies how this component's DOM element will be hidden. The accepted values are any of these:

• 'clip' : Hide using clip.
• 'display' : Hide using display.
• 'offsets' : Hide using positioning offsets.
• 'opacity' : Hide using opacity.
• 'visibility' : Hide using visibility.

Hiding using display results in having no dimensions as well as resetting scroll positions to 0.

The other modes overcome this but may have different trade-offs in certain circumstances.

Defaults to:

'display'

Available since: 6.5.0

hideOnMaskTap : Boolean

<ext-combobox/> <ext-comboboxfield hideOnMaskTap="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.hideOnMaskTap = true;
let hideOnMaskTap = element.hideOnMaskTap;

When using a modal Component, setting this to true will hide the modal mask and the Container when the mask is tapped on.

Defaults to:

null

hideTrigger : Boolean

<ext-combobox/> <ext-comboboxfield hideTrigger="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.hideTrigger = true;
let hideTrigger = element.hideTrigger;

true to hide the expand trigger.

Defaults to:

false

html : String / Ext.dom.Element / HTMLElement

<ext-combobox/> <ext-comboboxfield html="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.html = 'value';
let html = element.html;

Optional HTML content to render inside this Component, or a reference to an existing element on the page.

Defaults to:

null

id : String

immutable imm

<ext-combobox/> <ext-comboboxfield id="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.id = 'value';
let id = element.id;

The unique id of this component instance.

It should not be necessary to use this configuration except for singleton objects in your application. Components created with an id may be accessed globally using Ext.getCmp.

Instead of using assigned ids, use the itemId config, and Ext.ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The <ext-container/> class contains shortcut methods to query its descendant Components by selector.

Note that this id will also be used as the element id for the containing HTML element that is rendered to the page for this component. This allows you to write id-based CSS rules to style the specific instance of this component uniquely, and also to select sub-elements using this component's id as the parent.

Note: to avoid complications imposed by a unique id also see itemId.

Defaults to an auto-assigned id.

inheritUi : Boolean / String

readonly ro

<ext-combobox/> <ext-comboboxfield inheritUi="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.inheritUi = true;
let inheritUi = element.inheritUi;

Set to true on widgets that should inherit ui from their parent container. This property is typically set on the class body, but can be set on an instance as long as it is set prior to the instance being added to its container. This property is inspected at the moment a widget is added to a container, and any UIs on the container are added to the widget at that time. Inherited UIs are in addition to the widget's own ui, and are updated when the container's UI changes.

Defaults to:

false

inline : Boolean

<ext-combobox/> <ext-comboboxfield inline="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.inline = true;
let inline = element.inline;

true to cause this field to layout with inline element behavior. An inline field's width is determined by the total width of its label and body elements instead of automatically expanding to fill the width of its container.

Defaults to:

false

inputMask : String / Ext.field.InputMask

<ext-combobox/> <ext-comboboxfield inputMask="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.inputMask = 'value';
let inputMask = element.inputMask;

Important: To use this config you must require Ext.field.InputMask or use a complete framework build. The logic to implement an inputMask is not automatically included in a build.

Defaults to:

null

Available since: 6.5.0

inputType : String

<ext-combobox/> <ext-comboboxfield inputType="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.inputType = 'value';
let inputType = element.inputType;

The type attribute for input fields -- e.g. text, password, date, url, email, etc.

Defaults to:

'text'

isField : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield isField="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let isField = element.isField;

true in this class to identify an object this type, or subclass thereof.

This is used by Ext.form.Panel#getValues to determine which components inside a form are fields.

Defaults to:

true

isObservable : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield isObservable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.isObservable = true;
let isObservable = element.isObservable;

true in this class to identify an object as an instantiated Observable, or subclass thereof.

Defaults to:

true

isSelectField : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield isSelectField="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.isSelectField = true;
let isSelectField = element.isSelectField;

true in this class to identify an object this type, or subclass thereof.

Defaults to:

true

itemCls : String

<ext-combobox/> <ext-comboboxfield itemCls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.itemCls = 'value';
let itemCls = element.itemCls;

An additional CSS class to apply to items within the picker list.

Defaults to:

null

itemId : String

<ext-combobox/> <ext-comboboxfield itemId="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.itemId = 'value';
let itemId = element.itemId;

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext#getCmp, use itemId with Ext.Container#getComponent which will retrieve itemId's or ids. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container - avoiding potential conflicts with Ext.ComponentManager which requires a unique id.

Also see id, Ext.Container#query, Ext.Container#down and Ext.Container#child.

Defaults to:

undefined

itemTpl : String / Ext.XTemplate

<ext-combobox/> <ext-comboboxfield itemTpl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.itemTpl = 'value';
let itemTpl = element.itemTpl;

An XTemplate definition string (Or an Ext.XTemplate) which specifies how to display a list item from a record values object. This is automatically generated to display the displayField if not specified.

Defaults to:

false

keyMap : Object

<ext-combobox/> <ext-comboboxfield keyMap="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.keyMap = { };
let keyMap = element.keyMap;

An object containing handlers for keyboard events. The property names of this object are the key name and any modifiers. The values of the properties are the descriptors of how to handle each event.

The handler descriptor can be simply the handler function(either the literal function or the method name), or it can be an object with these properties:

• handler: The function or its name to call to handle the event.
• scope: The this pointer context (can be "this" or "controller").
• event: An optional override of the key event to which to listen.

Important: Calls to setKeyMap do not replace the entire keyMap but instead update the provided mappings. That is, unless null is passed as the value of the keyMap which will clear the keyMap of all entries.

Defaults to:

null

Properties

scope : String

The default scope to apply to key handlers which do not specify a scope. This is processed the same way as the scope of cfg-listeners. It defaults to the "controller", but using 'this' means that an instance method will be used.

keyMapEnabled : Boolean

<ext-combobox/> <ext-comboboxfield keyMapEnabled="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.keyMapEnabled = true;
let keyMapEnabled = element.keyMapEnabled;

Enables or disables processing keys in the keyMap. This value starts as null and if it is null when initKeyMap is called, it will automatically be set to true. Since initKeyMap is called by <ext-component/> at the proper time, this is not something application code normally handles.

Defaults to:

null

label : String

<ext-combobox/> <ext-comboboxfield label="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.label = 'value';
let label = element.label;

The label of this field

Defaults to:

null

labelAlign : 'top' / 'left' / 'bottom' / 'right'

<ext-combobox/> <ext-comboboxfield labelAlign="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.labelAlign = 'value';
let labelAlign = element.labelAlign;

When value is 'placeholder', the label text will be rendered as placeholder text inside the empty input and will animated to "top" alignment when the input is focused or contains text. The position to render the label relative to the field body.

Defaults to:

'left'

labelCls : String

<ext-combobox/> <ext-comboboxfield labelCls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.labelCls = 'value';
let labelCls = element.labelCls;

Optional CSS class to add to the Label element.

Defaults to:

null

labelMinWidth : Number / String

<ext-combobox/> <ext-comboboxfield labelMinWidth="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.labelMinWidth = 'value';
let labelMinWidth = element.labelMinWidth;

Min-width of this field's label.

Defaults to:

null

labelTextAlign : 'top' / 'right' / 'bottom' / 'left'

<ext-combobox/> <ext-comboboxfield labelTextAlign="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.labelTextAlign = 'value';
let labelTextAlign = element.labelTextAlign;

Text alignment of this field's label

Defaults to:

'left'

labelWidth : Number / String

<ext-combobox/> <ext-comboboxfield labelWidth="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.labelWidth = 'value';
let labelWidth = element.labelWidth;

Width of this field's label. Can be a number of pixels or any valid CSS value, such as '30%'. To size the label to its text, use labelWidth: 'auto'

Defaults to:

null

labelWrap : Boolean

<ext-combobox/> <ext-comboboxfield labelWrap="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.labelWrap = true;
let labelWrap = element.labelWrap;

true to allow the label to wrap. If set to false, the label will be truncated with an ellipsis.

Defaults to:

false

lastKeyMapEvent : Ext.event.Event

readonly ro

<ext-combobox/> <ext-comboboxfield lastKeyMapEvent="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.lastKeyMapEvent = 'value';
let lastKeyMapEvent = element.lastKeyMapEvent;

The last key event processed is cached on the component for use in subsequent event handlers.

Available since: 6.6.0

left : Number / String

<ext-combobox/> <ext-comboboxfield left="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.left = 'value';
let left = element.left;

The absolute left position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

listeners : Object

<ext-combobox/> <ext-comboboxfield listeners="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.listeners = { };
let listeners = element.listeners;

A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.

DOM events from Ext JS <ext-component/>

While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataViews itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

margin : Number / String

<ext-combobox/> <ext-comboboxfield margin="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.margin = 'value';
let margin = element.margin;

The margin to use on this Component. Can be specified as a number (in which case all edges get the same margin) or a CSS string like '5 10 10 10'

Defaults to:

null

matchFieldWidth : Boolean

<ext-combobox/> <ext-comboboxfield matchFieldWidth="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.matchFieldWidth = true;
let matchFieldWidth = element.matchFieldWidth;

*Only valid when the picker: 'floated' is used. Whether the floatedPickers width should be explicitly set to match the width of the input element.

Defaults to:

true

maxHeight : Number / String

<ext-combobox/> <ext-comboboxfield maxHeight="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.maxHeight = 'value';
let maxHeight = element.maxHeight;

The maximum height of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size. Note that this config will not apply if the Component is 'positioned' (absolutely positioned or centered)

Defaults to:

null

maxLength : Number

<ext-combobox/> <ext-comboboxfield maxLength="10" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.maxLength = 10;
let maxLength = element.maxLength;

The maximum number of permitted input characters.

Defaults to:

null

maxWidth : Number / String

<ext-combobox/> <ext-comboboxfield maxWidth="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.maxWidth = 'value';
let maxWidth = element.maxWidth;

The maximum width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size. Note that this config will not apply if the Component is 'positioned' (absolutely positioned or centered)

Defaults to:

null

minHeight : Number / String

<ext-combobox/> <ext-comboboxfield minHeight="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.minHeight = 'value';
let minHeight = element.minHeight;

The minimum height of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

minWidth : Number / String

<ext-combobox/> <ext-comboboxfield minWidth="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.minWidth = 'value';
let minWidth = element.minWidth;

The minimum width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

modal : Boolean

<ext-combobox/> <ext-comboboxfield modal="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.modal = true;
let modal = element.modal;

true to make this Component modal. This will create a mask underneath the Component that covers its parent and does not allow the user to interact with any other Components until this Component is dismissed.

Defaults to:

null

modelValidation : Boolean

immutable imm

<ext-combobox/> <ext-comboboxfield modelValidation="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.modelValidation = true;
let modelValidation = element.modelValidation;

This config enables binding to your Ext.data.Model#validators. This is only processed by form fields (e.g., Ext.field.*) at present, however, this setting is inherited and so can be set on a parent container.

When set to true by a component (or by an ancestor container), the validators of for any {@Ext.data.Model record} fields will be used wherever the value is bound to such data fields.

While this config can be set arbitrarily high in the component hierarchy, doing so can create a lot overhead if most of your form fields do not actually rely on validators in your data model.

Using this setting for a form that is bound to an Ext.data.Model might look like this:

 {
     xtype: 'panel',
     modelValidation: true,
     items: [{
         xtype: 'textfield',
         bind: '{theUser.firstName}'
     },{
         xtype: 'textfield',
         bind: '{theUser.lastName}'
     },{
         xtype: 'textfield',
         bind: '{theUser.phoneNumber}'
     },{
         xtype: 'textfield',
         bind: '{theUser.email}'
     }]
 }

Defaults to:

null

Available since: 6.5.0

multiSelect : Boolean

<ext-combobox/> <ext-comboboxfield multiSelect="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.multiSelect = true;
let multiSelect = element.multiSelect;

Configure as true to allow selection of multiple items from the picker. This results in each selected item being represented by a "chip" in the input area.

When true, the field's value will be an array containing the valueField values of all selected records or null when there is no selection.

Defaults to:

null

name : String

<ext-combobox/> <ext-comboboxfield name="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.name = 'value';
let name = element.name;

The field's name. Used by form panels to gather data to be submitted.

For <ext-inputfield/> this name is set as the name attribute of the inputElement

Defaults to:

null

nameable : Boolean

immutable imm

<ext-combobox/> <ext-comboboxfield nameable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.nameable = true;
let nameable = element.nameable;

Set to true for this component's name property to be tracked by its containing nameHolder.

Defaults to:

false

options : Array

<ext-combobox/> <ext-comboboxfield options="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.options = 'value';
let options = element.options;

An array of select options.

[
    {text: 'First Option',  value: 'first'},
    {text: 'Second Option', value: 'second'},
    {text: 'Third Option',  value: 'third'}
]

Note: Option object member names should correspond with defined valueField and displayField values.

This config is mutually exclusive with the store config. Specifying them both is unssupported and will produce undefined behaviour.

Defaults to:

null

padding : Number / String

<ext-combobox/> <ext-comboboxfield padding="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.padding = 'value';
let padding = element.padding;

The padding to use on this Component. Can be specified as a number (in which case all edges get the same padding) or a CSS string like '5 10 10 10'

Defaults to:

null

pattern : String

<ext-combobox/> <ext-comboboxfield pattern="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.pattern = 'value';
let pattern = element.pattern;

The value for the HTML5 pattern attribute. You can use this to change which keyboard layout will be used.

Ext.define('Ux.field.Pattern', {
    extend : 'Ext.field.Text',
    xtype  : 'patternfield',

    config : {

component : { pattern : '[0-9]*' } } });

Even though it extends <ext-textfield/>, it will display the number keyboard.

Defaults to:

null

picker : String / Object

<ext-combobox/> <ext-comboboxfield picker="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.picker = 'value';
let picker = element.picker;

A string representing the type of picker to use. Can be one of the following values.

• 'edge' to use the edgePicker, generally used on small formfactor devices.
• 'floated' to use the floatedPicker, generally used on tablets or desktops.
• 'auto' to allow the framework to select the appropriate picker for the device.

Can also be a config object for the picker.

Defaults to:

'auto'

placeholder : String

<ext-combobox/> <ext-comboboxfield placeholder="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.placeholder = 'value';
let placeholder = element.placeholder;

A string value displayed in the input when the control is empty.

Defaults to:

null

plugins : Array / Ext.enums.Plugin / Object / Ext.plugin.Abstract

<ext-combobox/> <ext-comboboxfield plugins="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.plugins = { };
let plugins = element.plugins;

This config describes one or more plugin config objects used to create plugin instances for this component.

Plugins are a way to bundle and reuse custom functionality. Plugins should extend Ext.plugin.Abstract but technically the only requirement for a valid plugin is that it contain an init method that accepts a reference to its owner. Once a plugin is created, the owner will call the init method, passing a reference to itself. Each plugin can then call methods or respond to events on its owner as needed to provide its functionality.

This config's value can take several different forms.

The value can be a single string with the plugin's Ext.enums.Plugin:

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: 'listpaging'
 });

In the above examples, the string "listpaging" is the type alias for listpaging. The full alias includes the "plugin." prefix (i.e., 'plugin.listpaging').

The preferred form for multiple plugins or to configure plugins is the keyed-object form (new in version 6.5):

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: {
         pullrefresh: true,
         listpaging: {
             autoPaging: true,
             weight: 10
         }
     }
 });

The object keys are the id's as well as the default type alias. This form allows the value of the plugins to be merged from base class to derived class and finally with the instance configuration. This allows classes to define a set of plugins that derived classes or instantiators can further configure or disable. This merge behavior is a feature of the config.

The plugins config can also be an array of plugin aliases (arrays are not merged so this form does not respect plugins defined by the class author):

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: ['listpaging', 'pullrefresh']
 });

An array can also contain elements that are config objects with a type property holding the type alias:

 var list = Ext.create({
     xtype: 'list',
     itemTpl: '<div class="item">{title}</div>',
     store: 'Items',

     plugins: ['pullrefresh', {
         type: 'listpaging',
         autoPaging: true
     }]
 });

Defaults to:

null

publishes : String / String[] / Object

<ext-combobox/> <ext-comboboxfield publishes="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.publishes = 'value';
let publishes = element.publishes;

One or more names of config properties that this component should publish to its ViewModel. Generally speaking, only properties defined in a class config block (including ancestor config blocks and mixins) are eligible for publishing to the viewModel. Some components override this and publish their most useful configs by default.

Note: We'll discuss publishing properties not found in the config block below.

Values determined to be invalid by component (often form fields and model validations) will not be published to the ViewModel.

This config uses the cfg-reference to determine the name of the data object to place in the ViewModel. If reference is not set then this config is ignored.

By using this config and cfg-reference you can bind configs between components. For example:

 ...
     items: [{
         xtype: 'textfield',
         reference: 'somefield',  // component's name in the ViewModel
         publishes: 'value' // value is not published by default
     },{
         ...
     },{
         xtype: 'displayfield',
         bind: 'You have entered "{somefield.value}"'
     }]
 ...

Classes must provide this config as an Object:

 Ext.define('App.foo.Bar', {
     publishes: {
         foo: true,
         bar: true
     }
 });

This is required for the config system to properly merge values from derived classes.

For instances this value can be specified as a value as show above or an array or object as follows:

 {
     xtype: 'textfield',
     reference: 'somefield',
     publishes: [
         'value',
         'rawValue',
         'dirty'
     ]
 }

 // This achieves the same result as the above array form.
 {
     xtype: 'textfield',
     reference: 'somefield',
     publishes: {
         value: true,
         rawValue: true,
         dirty: true
     }
 }

In some cases, users may want to publish a property to the viewModel that is not found in a class config block. In these situations, you may utilize publishState if the property has a setter method. Let's use setFieldLabel as an example:

  setFieldLabel: function(fieldLabel) {
      this.callParent(arguments);
      this.publishState('fieldLabel', fieldLabel);
  }

With the above chunk of code, fieldLabel may now be published to the viewModel.

Defaults to:

{
    selection: 1
}

readOnly : Boolean

<ext-combobox/> <ext-comboboxfield readOnly="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.readOnly = true;
let readOnly = element.readOnly;

true to set the field DOM element readonly attribute to "true".

Mutation of <ext-textfield/> through triggers is also disabled.

To simply prevent typing into the field while still allowing mutation through triggers, set editable to false.

Defaults to:

false

record : Ext.data.Model

<ext-combobox/> <ext-comboboxfield record="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.record = 'value';
let record = element.record;

A model instance which updates the Component's html based on it's tpl. Similar to the data configuration, but tied to to a record to make allow dynamic updates. This must be a model instance and not a configuration of one.

Defaults to:

null

recordCreator : Function / String

<ext-combobox/> <ext-comboboxfield recordCreator="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.recordCreator = 'value';
let recordCreator = element.recordCreator;

Defaults to:

null

Available since: 6.6.0

Properties

value : String

The typed value to be converted into a new record.

model : ObExt.data.Model

This field's stores model.

field : Ext.field.Select

This SelectField.

A function, or a method name in this class, or in a ViewController to be used to create a record from a typed value when forceSelection is false.

This gives app developers a chance to create a full featured record, or to veto the record creation by returning null.

recordCreatorScope : Object

<ext-combobox/> <ext-comboboxfield recordCreatorScope="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.recordCreatorScope = { };
let recordCreatorScope = element.recordCreatorScope;

The scope (this reference) in which the configured recordCreator will be executed, unless the recordCreator is a ViewController method name.

Defaults to:

null

Available since: 6.6.0

reference : String

immutable imm

<ext-combobox/> <ext-comboboxfield reference="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.reference = 'value';
let reference = element.reference;

Specifies a name for this component inside its component hierarchy. This name must be unique within its view or its Ext.app.ViewController. See the documentation in Ext.container.Container for more information about references.

Note: Valid identifiers start with a letter or underscore and are followed by zero or more additional letters, underscores or digits. References are case sensitive.

Defaults to:

null

relative : Boolean

<ext-combobox/> <ext-comboboxfield relative="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.relative = true;
let relative = element.relative;

Only valid when a component is cfg-floated

Configure this as true if you require descendant floated components to be positioned relative to this component's coordinate space, not the viewport's coordinate space.

Note: The coordinate space is this Component's encapsulating element's area. Not that of the inner element in which static child items are rendered by the layout.

Defaults to:

false

Available since: 6.2.0

rendered : Boolean

readonly ro

<ext-combobox/> <ext-comboboxfield rendered="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let rendered = element.rendered;

The rendered flag is set when a widget is inserted into the document for the first time.

Note that this is a one-way operation. The first time a widget is inserted into the document, this flag is set, and it is never unset.

required : Boolean

<ext-combobox/> <ext-comboboxfield required="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.required = true;
let required = element.required;

true to make this field required.

Defaults to:

false

requiredMessage : String

<ext-combobox/> <ext-comboboxfield requiredMessage="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.requiredMessage = 'value';
let requiredMessage = element.requiredMessage;

The error message to display when required is true and the field's value is "empty" (null, undefined, or empty string).

Defaults to:

'This field is required'

right : Number / String

<ext-combobox/> <ext-comboboxfield right="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.right = 'value';
let right = element.right;

The absolute right position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

ripple : Boolean / Object / String

<ext-combobox/> <ext-comboboxfield ripple="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.ripple = true;
let ripple = element.ripple;

Set to truthy, Color or Object value for the ripple.

Defaults to:

null

Available since: 6.5.0

Properties

color : String

The background color of the ripple.

position : Array

Position for the ripple to start at [x,y]. Determines if a Ripple effect should happen whenever this element is pressed.

For example: { ripple: true }

Or:

 {
     ripple: {
         color: 'red'
     }
 }

For complex components, individual elements can suppress ripples by adding the x-no-ripple class to disable rippling for a tree of elements.

scrollable : Boolean / String / Object

<ext-combobox/> <ext-comboboxfield scrollable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.scrollable = true;
let scrollable = element.scrollable;

Configuration options to make this Component scrollable. Acceptable values are:

• true to enable auto scrolling.
• false (or null) to disable scrolling - this is the default.
• x or horizontal to enable horizontal scrolling only
• y or vertical to enable vertical scrolling only

Also accepts a configuration object for a Ext.scroll.Scroller if if advanced configuration is needed.

The getter for this config returns the Ext.scroll.Scroller instance. You can use the Scroller API to read or manipulate the scroll position:

// scrolls the component to 5 on the x axis and 10 on the y axis
component.getScrollable().scrollTo(5, 10);

Defaults to:

null

selectOnTab : Boolean

<ext-combobox/> <ext-comboboxfield selectOnTab="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.selectOnTab = true;
let selectOnTab = element.selectOnTab;

Whether the Tab key should select the currently highlighted item.

Defaults to:

true

selection : Ext.data.Model

<ext-combobox/> <ext-comboboxfield selection="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.selection = 'value';
let selection = element.selection;

The selected model. null if no value exists.

Defaults to:

null

session : Boolean / Object / Ext.data.Session

<ext-combobox/> <ext-comboboxfield session="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.session = true;
let session = element.session;

If provided this creates a new Session instance for this component. If this is a Container, this will then be inherited by all child components.

To create a new session you can specify true:

 Ext.create({
     xtype: 'viewport',
     session: true,

     items: [{
         ...
     }]
 });

Alternatively, a config object can be provided:

 Ext.create({
     xtype: 'viewport',
     session: {
         ...
     },

     items: [{
         ...
     }]
 });

Defaults to:

null

shadow : Boolean

<ext-combobox/> <ext-comboboxfield shadow="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.shadow = true;
let shadow = element.shadow;

Configure as true for the component to have a drop shadow. 'false' will suppress any default shadow. By default the theme will determine the presence of a shadow.

Defaults to:

null

Available since: 6.2.0

shareableName : Boolean

immutable imm

<ext-combobox/> <ext-comboboxfield shareableName="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.shareableName = true;
let shareableName = element.shareableName;

Set to true to allow this component's name to be shared by other items in the same nameHolder. Such items will be returned in an array from lookupName.

Defaults to:

false

shim : Boolean

<ext-combobox/> <ext-comboboxfield shim="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.shim = true;
let shim = element.shim;

Only valid when a component is cfg-floated

Configure as true for the component to use an <iframe> as an underlay to ensure certain non-standard browser plugins are occluded by this component.

Defaults to:

false

Available since: 6.2.0

showAnimation : String / Mixed

<ext-combobox/> <ext-comboboxfield showAnimation="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.showAnimation = 'value';
let showAnimation = element.showAnimation;

Animation effect to apply when the Component is being shown. Typically you want to use an inbound animation type such as 'fadeIn' or 'slideIn'. For more animations, check the Ext.fx.Animation#type config.

Defaults to:

null

stateId : String

<ext-combobox/> <ext-comboboxfield stateId="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.stateId = 'value';
let stateId = element.stateId;

The unique id for this object to use for state management purposes.

Defaults to:

null

stateful : Boolean / Object / String[]

<ext-combobox/> <ext-comboboxfield stateful="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.stateful = true;
let stateful = element.stateful;

This config specifies the config properties that will be persisted using the Ext.state.Provider. If this config is set to true, the configs specified by statefulDefaults will be assumed.

 stateful: true

Otherwise, this config can be an array of strings of the properties to save:

 stateful: [
     'width',
     'height',
     'collapsed'
 ]

The above is equivalent to:

 stateful: {
     width: true,
     height: true,
     collapsed: true
 }

Note: To be truly stateful, an id or stateId must also be assigned.

A stateful object will save its state when any of these config properties change value.

Defaults to:

false

store : Ext.data.Store / Object / String

<ext-combobox/> <ext-comboboxfield store="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.store = 'value';
let store = element.store;

The store to provide selection options data. Either a Store instance, configuration object or store ID.

Defaults to:

null

stripCharsRe : RegExp

immutable imm

<ext-combobox/> <ext-comboboxfield stripCharsRe="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.stripCharsRe = 'value';
let stripCharsRe = element.stripCharsRe;

A JavaScript RegExp object used to strip unwanted content from the value during input. If stripCharsRe is specified, every character sequence matching stripCharsRe will be removed.

style : String / Object

<ext-combobox/> <ext-comboboxfield style="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.style = 'value';
let style = element.style;

Additional CSS styles that will be rendered into an inline style attribute when the widget is rendered.

You can pass either a string syntax:

style: 'background:red'

Or by using an object:

style: {
    background: 'red'
}

When using the object syntax, you can define CSS Properties by using a string:

style: {
    'border-left': '1px solid red'
}

Although the object syntax is much easier to read, we suggest you to use the string syntax for better performance.

Defaults to:

null

tabIndex : Number

<ext-combobox/> <ext-comboboxfield tabIndex="10" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.tabIndex = 10;
let tabIndex = element.tabIndex;

DOM tabIndex attribute for this component's focusEl.

Defaults to:

null

textAlign : 'left' / 'center' / 'right'

<ext-combobox/> <ext-comboboxfield textAlign="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.textAlign = 'value';
let textAlign = element.textAlign;

The text alignment of this field.

Defaults to:

'left'

toFrontOnShow : Boolean

<ext-combobox/> <ext-comboboxfield toFrontOnShow="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.toFrontOnShow = true;
let toFrontOnShow = element.toFrontOnShow;

True to automatically call toFront when a cfg-floated Component is shown.

Defaults to:

true

tooltip : String / Object

<ext-combobox/> <ext-comboboxfield tooltip="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.tooltip = 'value';
let tooltip = element.tooltip;

The tooltip for this component - can be a string to be used as innerHTML (html tags are accepted) or <ext-tooltip/> config object.

The default behavior is to use a shared tip instance. The tooltip configuration is registered with the Ext.tip.Manager. To enable this, your application can set the Ext.app.Application#quickTips config, or an instance of the Ext.tip.Manager may be created manually.

To force a unique tooltip instance to be created, specify autoCreate: true on this configuration.

Configuring this with autoHide: false implies autoCreate: true so that the desired persistent behavior can be obtained with other targets still showing the singleton instance.

Defaults to:

null

top : Number / String

<ext-combobox/> <ext-comboboxfield top="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.top = 'value';
let top = element.top;

The absolute top position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'positioned', which means it will no longer participate in the layout of the Container that it resides in.

Defaults to:

null

touchAction : Object

<ext-combobox/> <ext-comboboxfield touchAction="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.touchAction = { };
let touchAction = element.touchAction;

Emulates the behavior of the CSS touch-action property in a cross-browser compatible manner.

Keys in this object are touch action names, and values are false to disable a touch action or true to enable it. Accepted keys are:

• panX
• panY
• pinchZoom
• doubleTapZoom

All touch actions are enabled (true) by default, so it is usually only necessary to specify which touch actions to disable. For example, the following disables only horizontal scrolling and pinch-to-zoom on the component's main element:

touchAction: {
    panX: false,
    pinchZoom: false
}

Touch actions can be specified on reference elements using the reference element name, for example:

// disables horizontal scrolling on the main element, and double-tap-zoom
// on the child element named "body"
touchAction: {
    panY: false
    body: {
        doubleTapZoom: false
    }
}

The primary motivation for setting the touch-action of an element is to prevent the browser's default handling of a gesture such as pinch-to-zoom, or drag-to-scroll, so that the application can implement its own handling of that gesture on the element. Suppose, for example, a component has a custom drag handler on its element and wishes to prevent horizontal scrolling of its container while it is being dragged:

Ext.create('Ext.Widget', {
    touchAction: {
        panX: false
    },
    listeners: {
        drag: function(e) {
            // implement drag logic
        }
    }
});

Defaults to:

null

tpl : String / String[] / Ext.Template / Ext.XTemplate[]

<ext-combobox/> <ext-comboboxfield tpl="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.tpl = 'value';
let tpl = element.tpl;

A String, Ext.Template, Ext.XTemplate or an Array of strings to form an Ext.XTemplate. Used in conjunction with the data and tplWriteMode configurations.

Note The data configuration must be set for any content to be shown in the component when using this configuration.

Defaults to:

null

tplWriteMode : String

<ext-combobox/> <ext-comboboxfield tplWriteMode="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.tplWriteMode = 'value';
let tplWriteMode = element.tplWriteMode;

The Ext.(X)Template method to use when updating the content area of the Component.

Valid modes are:

• append
• insertAfter
• insertBefore
• insertFirst
• overwrite

Defaults to:

'overwrite'

triggers : Object

<ext-combobox/> <ext-comboboxfield triggers="{ }" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.triggers = { };
let triggers = element.triggers;

<ext-trigger/> <ext-trigger.trigger/> to use in this field. The keys in this object are unique identifiers for the triggers. The values in this object are <ext-trigger/> <ext-trigger.trigger/> configuration objects.

Ext.create('Ext.field.Text', {
    label: 'My Custom Field',
    triggers: {

foo: { cls: 'my-foo-trigger', handler: function() { console.log('foo trigger clicked'); } }, bar: { cls: 'my-bar-trigger', handler: function() { console.log('bar trigger clicked'); } } } });

The weight value may be a negative value in order to position custom triggers ahead of default triggers like that of a DatePicker field.

Ext.create('Ext.form.DatePicker', {
    label: 'Pick a Date',
    triggers: {

foo: { cls: 'my-foo-trigger', weight: -2, // negative to place before default triggers handler: function() { console.log('foo trigger clicked'); } }, bar: { cls: 'my-bar-trigger', weight: -1, handler: function() { console.log('bar trigger clicked'); } } } });

Defaults to:

{
    clear: {
        type: 'clear'
    }
}

twoWayBindable : String / String[] / Object

<ext-combobox/> <ext-comboboxfield twoWayBindable="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.twoWayBindable = 'value';
let twoWayBindable = element.twoWayBindable;

This object holds a map of config properties that will update their binding as they are modified. For example, value is a key added by form fields. The form of this config is the same as publishes.

This config is defined so that updaters are not created and added for all bound properties since most cannot be modified by the end-user and hence are not appropriate for two-way binding.

Defaults to:

{
    selection: 1
}

ui : String / String[]

<ext-combobox/> <ext-comboboxfield ui="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.ui = 'value';
let ui = element.ui;

The ui or uis to be used on this Component

When a ui is configured, CSS class names are added to the element, created by appending the ui name(s) to each classCls and/or baseCls.

Defaults to:

null

userCls : String / String[]

<ext-combobox/> <ext-comboboxfield userCls="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.userCls = 'value';
let userCls = element.userCls;

One or more CSS classes to add to the component's primary element. This config is intended solely for use by the component instantiator (the "user"), not by derived classes.

For example:

 items: [{
     xtype: 'button',
     userCls: 'my-button'
 ...
 }]

Defaults to:

null

userSelectable : Boolean / String / Object

<ext-combobox/> <ext-comboboxfield userSelectable="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.userSelectable = true;
let userSelectable = element.userSelectable;

Setting the value to true implies auto, while false implies none. Setting the value to text allows users to select text within this component. The value may also be an object keyed by child element name as seen below.

Can also be any valid value for the CSS3 user-select property.

By default, the user cannot click+drag+select text/elements of the UI. Applications may want to enable user selection for specific DOM elements, such as the bodyElement of a component used as a tab panel. The tab and tab text would not be user selectable in this example, but the content area when the tab is selected would.

 userSelectable: {
     element: true,       // allow the element to be user selectable
     bodyElement: true    // allow the component's body element to be user selectable
 }

Defaults to:

false

Available since: 6.5.1

validateDisabled : Boolean

<ext-combobox/> <ext-comboboxfield validateDisabled="true" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.validateDisabled = true;
let validateDisabled = element.validateDisabled;

true to validate the field, even if it is disabled.

Defaults to:

false

validateOnInit : "none" / "auto" / "all"

readonly ro

<ext-combobox/> <ext-comboboxfield validateOnInit="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.validateOnInit = 'value';
let validateOnInit = element.validateOnInit;

Determines how initial values will handle validation

• none: Will not validate any initial values
• auto: Will only validate non-empty initial values
• all: Will validate all initial values

Defaults to:

'auto'

validationMessage : String

<ext-combobox/> <ext-comboboxfield validationMessage="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.validationMessage = 'value';
let validationMessage = element.validationMessage;

For validation, regex, etc., this is the error message returned if field is invalid.

Defaults to:

'Is in the wrong format'

validators : Mixed

<ext-combobox/> <ext-comboboxfield validators="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.validators = 'value';
let validators = element.validators;

A validator or array of validators to be applied to the field.

When the field is validated, each validator is applied and if any one of them determines the field is invalid, the field will be marked as invalid. If you examine the field's validators, you will get an array of Ext.data.Validators.

Validation currently is synchronous. If you need to validate a field with interaction with a server, you would do this when the form is submitted.

A validator may be:

• A regexp - if the field fails to match the regexp, it is invalid.

• A function - the function will be called to validate the field; it should return false if invalid.

• An object - an object with a member fn that is a function to be called to validate the field.

• An instantiated Validator Ext.data.validator.Validator

Defaults to:

null

value : Mixed

<ext-combobox/> <ext-comboboxfield value="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.value = 'value';
let value = element.value;

The field's value

Defaults to:

null

valueField : String / Number

<ext-combobox/> <ext-comboboxfield valueField="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.valueField = 'value';
let valueField = element.valueField;

The underlying data value name to bind to this Select control. If configured as null, the displayField is used.

Defaults to:

'value'

valueNotFoundText : String

<ext-combobox/> <ext-comboboxfield valueNotFoundText="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.valueNotFoundText = 'value';
let valueNotFoundText = element.valueNotFoundText;

The message to display if the value passed to setValue is not found in the store.

Defaults to:

null

viewModel : String / Object / Ext.app.ViewModel

<ext-combobox/> <ext-comboboxfield viewModel="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.viewModel = 'value';
let viewModel = element.viewModel;

The ViewModel is a data provider for this component and its children. The data contained in the ViewModel is typically used by adding bind configs to the components that want present or edit this data.

When set, the ViewModel is created and links to any inherited viewModel instance from an ancestor container as the "parent". The ViewModel hierarchy, once established, only supports creation or destruction of children. The parent of a ViewModel cannot be changed on the fly.

If this is a root-level ViewModel, the data model connection is made to this component's associated Ext.data.Session. This is determined by calling getInheritedSession.

Defaults to:

null

weight : Number

<ext-combobox/> <ext-comboboxfield weight="10" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.weight = 10;
let weight = element.weight;

This value controls this item's order in a weighted <ext-container/> (see parent).

Lower values gravitate towards the start of the container - the top in vertical layouts, the locale start side in horizontal layouts.

Defaults to:

0

width : Number / String

<ext-combobox/> <ext-comboboxfield width="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.width = 'value';
let width = element.width;

The width of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. By default, if this is not explicitly set, this Component's element will simply have its own natural size. If set to auto, it will set the width to null meaning it will have its own natural size.

Defaults to:

null

x : Number

<ext-combobox/> <ext-comboboxfield x="10" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.x = 10;
let x = element.x;

Only valid when a component is cfg-floated

The x position at which to position this component. This is usually viewport-relative. But if there is a relative: true ancestor, it will be relative to that.

Defaults to:

0

xtype : String

immutable imm

<ext-combobox/> <ext-comboboxfield xtype="value" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.xtype = 'value';
let xtype = element.xtype;

The xtype configuration option can be used to optimize Component creation and rendering. It serves as a shortcut to the full component name. For example, the component Ext.button.Button has an xtype of button.

You can define your own xtype on a custom <ext-component/> like so:

Ext.define('PressMeButton', {
    extend: 'Ext.button.Button',
    xtype: 'pressmebutton',
    text: 'Press Me'
});

Any Component can be created implicitly as an object config with an xtype specified, allowing it to be declared and passed into the rendering pipeline without actually being instantiated as an object. Not only is rendering deferred, but the actual creation of the object itself is also deferred, saving memory and resources until they are actually needed. In complex, nested layouts containing many Components, this can make a noticeable improvement in performance.

// Explicit creation of contained Components:
var panel = new Ext.Panel({
   // ...
   items: [
      Ext.create('Ext.button.Button', {
         text: 'OK'
      })
   ]
});

// Implicit creation using xtype:
var panel = new Ext.Panel({
   // ...
   items: [{
      xtype: 'button',
      text: 'OK'
   }]
});

In the first example, the button will always be created immediately during the panel's initialization. With many added Components, this approach could potentially slow the rendering of the page. In the second example, the button will not be created or rendered until the panel is actually displayed in the browser. If the panel is never displayed (for example, if it is a tab that remains hidden) then the button will never be created and will never consume any resources whatsoever.

y : Number

<ext-combobox/> <ext-comboboxfield y="10" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.y = 10;
let y = element.y;

Only valid when a component is cfg-floated

The x position at which to position this component. This is usually viewport-relative. But if there is a relative: true ancestor, it will be relative to that.

Defaults to:

0

zIndex : Number

<ext-combobox/> <ext-comboboxfield zIndex="10" />

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.zIndex = 10;
let zIndex = element.zIndex;

The z-index to give this Component when it is rendered.

Not valid for cfg-floated Components. The Z ordering of cfg-floated Components is managed by ordering of the DOM elements.

Defaults to:

null

addAfterListener

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.addAfterListener();

Alias for onAfter.

addBeforeListener

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.addBeforeListener();

Alias for onBefore.

addCls ( cls, [prefix], [suffix] )

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
element.addCls(cls, prefix, suffix);

Adds a CSS class (or classes) to this Component's rendered element.

Parameters

addListener ( eventName, [fn], [scope], [options], [order] ) : Object

chainable ch

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let addListener = element.addListener(eventName, fn, scope, options, order);

The on method is shorthand for addListener.

Appends an event handler to this object. For example:

myGridPanel.on("itemclick", this.onItemClick, this);

The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:

myGridPanel.on({
    cellclick: this.onCellClick,
    select: this.onSelect,
    viewready: this.onViewReady,
    scope: this // Important. Ensure "this" is correct during handler execution
});

One can also specify options for each event handler separately:

myGridPanel.on({
    cellclick: {fn: this.onCellClick, scope: this, single: true},
    viewready: {fn: panel.onViewReady, scope: panel}
});

Names of methods in a specified scope may also be used:

myGridPanel.on({
    cellclick: {fn: 'onCellClick', scope: this, single: true},
    viewready: {fn: 'onViewReady', scope: panel}
});

Parameters

  var panel = new Ext.panel.Panel({
      title: 'The title',
      listeners: {
          click: this.handlePanelClick,
          element: 'body'
      }
  });

 panel.body.un(...)

 handler('foo', 42, <actual event arguments>...);

false

'current'

Returns

this.btnListeners =  = myButton.on({
    destroyable: true
    mouseover:   function() { console.log('mouseover'); },
    mouseout:    function() { console.log('mouseout'); },
    click:       function() { console.log('click'); }
});

Ext.destroy(this.btnListeners);

this.btnListeners.destroy();

addManagedListener ( item, ename, [fn], [scope], [options] ) : Object

let element = document.body.querySelector('ext-combobox/> <ext-comboboxfield');
let addManagedListener = element.addManagedListener(item, ename, fn, scope, options);

The addManagedListener method is used when some object (call it "A") is listening to an event on another observable object ("B") and you want to remove that listener from "B" when "A" is destroyed. This is not an issue when "B" is destroyed because all of its listeners will be removed at that time.

Example:

Ext.define('Foo', {
    extend: 'Ext.Component',

    initComponent: function () {
        this.addManagedListener(MyApp.SomeSharedMenu, 'show', this.doSomething);
        this.callParent();
    }
});

As you can see, when an instance of Foo is destroyed, it ensures that the 'show' listener on the menu (MyApp.SomeGlobalSharedMenu) is also removed.

As of version 5.1 it is no longer necessary to use this method in most cases because listeners are automatically managed if the scope object provided to addListener is an Observable instance. However, if the observable instance and scope are not the same object you still need to use mon or addManagedListener if you want the listener to be managed.

Parameters