alignSelf : String

bindable bind

Specifies the self alignment of this widget in a box layout

Defaults to:

null

alignTarget : String

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

bindable bind

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

bindable bind

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

Defaults to:

false

ariaAttributes : Object

bindable bind

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

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

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

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.

autoCapitalize : Boolean

bindable bind

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

Defaults to:

null

autoComplete : Boolean

bindable bind

Autocomplete is disabled on Picker fields by default.

Defaults to:

false

autoCorrect : Boolean

bindable bind

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

Defaults to:

null

autoFitErrors : Boolean

bindable bind

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

Defaults to:

true

autoFocus : Boolean

bindable bind

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

bindable bind

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

bindable bind

Specify as false to always show the inputMask.

Defaults to:

true

Available since: 6.5.0

autoLoadOnValue : Boolean

bindable bind

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

bindable bind

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

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

bindable 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

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

A configuration object which may be specified to configure the Ext.dataview.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

clearable : Boolean

bindable bind

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

Defaults to:

true

cls : String / String[]

bindable bind

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

bindable bind

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

bindable bind

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

contentEl : Ext.dom.Element / HTMLElement / String

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

defaultListenerScope : Boolean

bindable bind

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

bindable bind

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:

','

dirty : Boolean

bindable bind

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

bindable bind

true to disable the field.

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

Defaults to:

false

displayed : Boolean

bindable bind

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

displayField : String / Number

bindable bind

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

bindable bind

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

docked : String

bindable bind

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

bindable bind

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

bindable bind

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[]

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

flex : Number / String / Object

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

*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?

focusCls : String

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

Defaults to:

'x-focused'

height : Number / String

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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'

bindable bind

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

bindable bind

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

bindable bind

true to hide the expand trigger.

Defaults to:

false

html : String / Ext.dom.Element / HTMLElement

bindable bind

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

Defaults to:

null

id : String

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.

inline : Boolean

bindable bind

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

bindable bind

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

bindable bind

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

Defaults to:

'text'

itemCls : String

bindable bind

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

Defaults to:

null

itemId : String

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

The label of this field

Defaults to:

null

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

bindable bind

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

bindable bind

Optional CSS class to add to the Label element.

Defaults to:

null

labelMinWidth : Number / String

bindable bind

Min-width of this field's label.

Defaults to:

null

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

bindable bind

Text alignment of this field's label

Defaults to:

'left'

labelWidth : Number / String

bindable bind

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

bindable bind

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

Defaults to:

false

left : Number / String

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

*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

bindable bind

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

bindable bind

The maximum number of permitted input characters.

Defaults to:

null

maxWidth : Number / String

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

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

bindable bind

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

bindable bind

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

For Ext.field.Input this name is set as the name attribute of the inputElement

Defaults to:

null

nameable : Boolean

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

Defaults to:

false

options : Array

bindable bind

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

bindable bind

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

bindable bind

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.field.Text, it will display the number keyboard.

Defaults to:

null

picker : String / Object

bindable bind

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

bindable bind

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

Defaults to:

null

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

bindable bind

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 Ext.dataview.plugin.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

bindable bind

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

bindable bind

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

Mutation of Ext.field.Text 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

bindable bind

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

bindable bind

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

bindable bind

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

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

bindable bind

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

renderTo : Ext.dom.Element

bindable bind

Optional element to render this Component to. Not required if this component is an item of a Container of a Container.

Defaults to:

null

required : Boolean

bindable bind

true to make this field required.

Defaults to:

false

requiredMessage : String

bindable bind

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

bindable bind

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

bindable bind

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

bindable bind

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

selection : Ext.data.Model

bindable bind

The selected model. null if no value exists.

Defaults to:

null

selectOnTab : Boolean

bindable bind

Whether the Tab key should select the currently highlighted item.

Defaults to:

true

session : Boolean / Object / Ext.data.Session

bindable bind

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

bindable bind

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

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

bindable bind

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

bindable bind

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

stateful : Boolean / Object / String[]

bindable bind

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

stateId : String

bindable bind

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

Defaults to:

null

store : Ext.data.Store / Object / String

bindable bind

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

Defaults to:

null

stripCharsRe : RegExp

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

bindable bind

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

bindable bind

DOM tabIndex attribute for this component's focusEl.

Defaults to:

null