Super classes

Ext.AbstractComponent Ext.Component Ext.form.BaseField Ext.form.Text Ext.form.Trigger

Mixins

Ext.util.Observable

A combobox control with support for autocomplete, remote-loading, paging and many other features.

A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is that to submit the valueField, you must specify a hiddenName to create a hidden input field to hold the value of the valueField. The displayField is shown in the text field which is named according to the name.

Events

To do something when something in ComboBox is selected, configure the select event:

var cb = new Ext.form.ComboBox({
    // all of your config options
    listeners:{
         scope: yourScope,
         'select': yourFunction
    }
});

// Alternatively, you can assign events after the object is created:
var cb = new Ext.form.ComboBox(yourOptions);
cb.on('select', yourFunction, yourScope);

ComboBox in Grid

If using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement a reusable render, for example:

// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
    return function(value){
        var record = combo.findRecord(combo.valueField, value);
        return record ? record.get(combo.displayField) : combo.valueNotFoundText;
    }
}

// create the combo instance
var combo = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender:true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    valueField: 'myId',
    displayField: 'displayText'
});

// snippet of column model used within grid
var cm = new Ext.grid.ColumnModel([{
       ...
    },{
       header: "Some Header",
       dataIndex: 'whatever',
       width: 130,
       editor: combo, // specify reference to combo instance
       renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
    },
    ...
]);

Filtering

A ComboBox uses filtering itself, for information about filtering the ComboBox store manually see lastQuery.

Config Options

allQuery : String

The text query to send to the server to return all records for the list with no filtering (defaults to '')

allQuery : String

The text query to send to the server to return all records for the list with no filtering (defaults to '')

allowBlank : Boolean

Specify false to validate that the value's length is > 0 (defaults to true)

autoCreate : String/Object

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

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

{tag: "input", type: "text", size: "24", autocomplete: "off"}

autoEl : Mixed

A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

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

You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to 'div'. The more complex Sencha classes use a more complex DOM structure specified by their own renderTpls.

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

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

autoRender : Mixed

This config is intended mainly for floating Components which may or may not be shown. Instead of using renderTo in th...

This config is intended mainly for floating Components which may or may not be shown. Instead of using renderTo in the configuration, and rendering upon construction, this allows a Component to render itself upon first show.

Specify as true to have this Component render to the document body upon first show.

Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.

This defaults to true for the Window class.

autoSelect : Boolean

true to select the first result gathered by the data store (defaults to true). A false value would require a manual ...

true to select the first result gathered by the data store (defaults to true). A false value would require a manual selection from the dropdown list to set the components value unless the value of (typeAheadDelay) were true.

autoSelect : Boolean

true to select the first result gathered by the data store (defaults to true). A false value would require a manual ...

baseCls : String

The base CSS class to apply to this components's element. This will also be prepended to elements within this compone...

The base CSS class to apply to this components's element. This will also be prepended to elements within this component like Panel's body will get a class x-panel-body. This means that if you create a subclass of Panel, and you want it to get all the Panels styling for the element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this component.

blankText : String

The error text to display if the allowBlank validation fails (defaults to 'This field is required')

border : Number/String

Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can be ...

Specifies the border for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.

checkChangeBuffer : Number

Defines a timeout in milliseconds for buffering checkChangeEvents that fire in rapid succession. Defaults to 50 milli...

Defines a timeout in milliseconds for buffering checkChangeEvents that fire in rapid succession. Defaults to 50 milliseconds.

checkChangeEvents : Array

A list of event names that will be listened for on the field's input element, which will cause the field's value to b...

A list of event names that will be listened for on the field's input element, which will cause the field's value to be checked for changes. If a change is detected, the change event will be fired, followed by validation if the validateOnChange option is enabled.

Defaults to ['change', 'propertychange'] in Internet Explorer, and ['change', 'input', 'textInput', 'keyup', 'dragdrop'] in other browsers. This catches all the ways that field values can be changed in most supported browsers; the only known exceptions at the time of writing are:

Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas
Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text fields and textareas
Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas

If you need to guarantee on-the-fly change notifications including these edge cases, you can call the checkChange method on a repeating interval, e.g. using Ext.TaskMgr, or if the field is within a Ext.form.FormPanel, you can use the FormPanel's Ext.form.FormPanel.pollForChanges configuration to set up such a task automatically.

clearFilterOnReset : Boolean

true to clear any filters on the store (when in local mode) when reset is called (defaults to true)

cls : String

An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...

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

componentCls : String

CSS Class to be added to a components root level element to give distinction to it via styling.

componentLayout : String/Object

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager...

The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.

Generally, developers will not use this configuration as all provided Components which need their internal elements sizing (Such as input fields) come with their own componentLayout managers.

The default layout manager will be used on instances of the base Ext.Component class which simply sizes the Component's encapsulating element to the height and width specified in the setSize method.

contentEl : String

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

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

Description :
This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
Notes :
The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.

The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.

Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

data : Mixed

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

delimiter : String

The character(s) used to separate the display values of multiple selected items when multiSelect = true. Defaults to ...

The character(s) used to separate the display values of multiple selected items when multiSelect = true. Defaults to ', '.

disableKeyFilter : Boolean

Specify true to disable input keystroke filtering (defaults to false)

disabled : Boolean

Defaults to false.

disabledCls : String

CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.

displayField : String

The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'field1' if tran...

The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'field1' if transforming a select or if the field name is autogenerated based on the store configuration).

See also valueField.

TODO still valid? Note: if using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active.

draggable : Boolean

Allows the component to be dragged via the touch event.

editable : Boolean

false to prevent the user from typing text directly into the field, the field will only respond to a click on the tri...

false to prevent the user from typing text directly into the field, the field will only respond to a click on the trigger to set the value. (defaults to true).

emptyCls : String

The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is au...

The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.

emptyText : String

The default text to place into an empty field (defaults to undefined). Note that normally this value will be submitte...

The default text to place into an empty field (defaults to undefined).

Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can set the submitEmptyText option of Ext.form.Basic.submit to false.

Also note that if you use inputType:'file', emptyText is not supported and should be avoided.

enableKeyEvents : Boolean

true to enable the proxying of key events for the HTML input field (defaults to false)

enforceMaxLength : Boolean

True to set the maxLength property on the underlying input field. Defaults to false

fieldCls : String

The default CSS class for the field input (defaults to 'x-form-field')

floating : Boolean

Specify as true to float the Component outside of the document flow using CSS absolute positioning. Components such a...

Specify as true to float the Component outside of the document flow using CSS absolute positioning.

Components such as Windows and Menus are floating by default.

focusCls : String

The CSS class to use when the field receives focus (defaults to 'x-form-focus')

forceSelection : Boolean

true to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text i...

true to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text into the field (defaults to false)

forceSelection : Boolean

true to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text i...

true to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text into the field (defaults to false)

frame : Boolean

Specify as true to have the Component inject framing elements within the Component at render time to provide a graphi...

Specify as true to have the Component inject framing elements within the Component at render time to provide a graphical rounded frame around the Component content.

This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer prior to version 9 which do not support rounded corners natively.

The extra space taken up by this framing is available from the read only property frameSize.

getInnerTpl : Function

If specified, will be used to generate the template for the markup inside each item in the dropdown list. Defaults to...

If specified, will be used to generate the template for the markup inside each item in the dropdown list. Defaults to the Ext.view.BoundList's default behavior, which is to display the value of each item's displayField.

growAppend : String

A string that will be appended to the field's current value for the purposes of calculating the target field size. On...

A string that will be appended to the field's current value for the purposes of calculating the target field size. Only used when the grow config is true. Defaults to a single capital "W" (the widest character in common fonts) to leave enough space for the next typed character and avoid the field value shifting before the width is adjusted.

handleHeight : Number

The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)

height : Number

The height of this component in pixels.

hidden : Boolean

Defaults to false.

hiddenId : String

If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id. The hiddenId and com...

If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id. The hiddenId and combo id should be different, since no two DOM nodes should share the same id.

hiddenName : String

If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults t...

If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically post during a form submission. See also valueField.

hiddenValue : String

Sets the initial value of the hidden field if hiddenName is specified to contain the selected valueField, from the St...

Sets the initial value of the hidden field if hiddenName is specified to contain the selected valueField, from the Store. Defaults to the configured value.

hideMode : String

A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be<div class="mdet...

A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be

'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.

Defaults to 'display'.

hideTrigger : Boolean

true to hide the trigger element and display only the base text field (defaults to false)

html : String/Object

An HTML fragment, or a DomHelper specification to use as the layout element content (defaults to ''). The HTML conten...

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

id : String

The unique id of this component instance (defaults to an auto-assigned id). It should not be necessary to use this co...

The unique id of this component instance (defaults to an auto-assigned id).

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 ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The 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.

Note: to access the container of a Component see ownerCt.

inputId : String

The id that will be given to the generated input DOM element. Defaults to an automatically generated id. If you confi...

The id that will be given to the generated input DOM element. Defaults to an automatically generated id. If you configure this manually, you must make sure it is unique in the document.

inputType : String

The type attribute for input fields -- e.g. radio, text, password, file (defaults to 'text'). The extended types supp...

The type attribute for input fields -- e.g. radio, text, password, file (defaults to 'text'). The extended types supported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to fall back to 'text'.

The types 'file' and 'password' must be used to render those field types currently -- there are no separate Ext components for those.

invalidText : String

The error text to use when marking a field invalid and no message is provided (defaults to 'The value in this field i...

The error text to use when marking a field invalid and no message is provided (defaults to 'The value in this field is invalid')

itemId : String

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id's. 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.ComponentMgr which requires a unique id.

var c = new Ext.Panel({ //
    height: 300,
    renderTo: document.body,
    layout: 'auto',
    items: [
        {
            itemId: 'p1',
            title: 'Panel 1',
            height: 150
        },
        {
            itemId: 'p2',
            title: 'Panel 2',
            height: 150
        }
    ]
})
p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

itemSelector : String

A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the Ext.Dat...

A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the Ext.DataView which handles the dropdown display will be working with.

Note: this setting is required if a custom XTemplate has been specified in tpl which assigns a class other than

'x-combo-list-item'

to dropdown list items

lazyInit : Boolean

true to not initialize the list for this combo until the field is focused (defaults to true)

lazyRender : Boolean

true to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor ...

true to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor (e.g. Grids), defaults to false).

listAlign : String/Array

A valid anchor position value. See Ext.core.Element.alignTo for details on supported anchor positions and offsets. To...

A valid anchor position value. See Ext.core.Element.alignTo for details on supported anchor positions and offsets. To specify x/y offsets as well, this value may be specified as an Array of Ext.core.Element.alignTo method arguments.

[ 'tl-bl?', [6,0] ]

(defaults to 'tl-bl?')

listClass : String

The CSS class to add to the predefined 'x-combo-list' class applied the dropdown list element (defaults to '').

listEmptyText : String

The empty text to display in the data view if no items are found. (defaults to '')

listEmptyText : String

The empty text to display in the data view if no items are found. (defaults to '')

listLoadingText : String

The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Load...

The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loading...')

listMaxHeight : Number

The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)

listWidth : Number

The width (used as a parameter to Ext.core.Element.setWidth) of the dropdown list (defaults to the width of the Combo...

The width (used as a parameter to Ext.core.Element.setWidth) of the dropdown list (defaults to the width of the ComboBox field). See also minListWidth

listWidth : Number The width in pixels of the dropdown list (defaults to the width of the ComboBox field). The width in pixels of the dropdown list (defaults to the width of the ComboBox field).

listeners : Object A config object containing one or more event handlers to be added to this object during initialization. This should ... 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 ExtJs Components While some ExtJs 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 DataView's click 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({ 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'); } } } });

loader : Ext.ComponentLoader/Object A configuration object or an instance of a Ext.ComponentLoader to load remote content for this Component. A configuration object or an instance of a Ext.ComponentLoader to load remote content for this Component.

loadingText : String The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Load... The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loading...')

maintainFlex : Boolean Only valid when a sibling element of a Splitter within a VBox or HBox layout. Specifies that if an immediate sibling ... Only valid when a sibling element of a Splitter within a VBox or HBox layout. Specifies that if an immediate sibling Splitter is moved, the Component on the other side is resized, and this Component maintains its configured flex value.

margin : Number/String Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be ... Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.

maskRe : RegExp An input mask regular expression that will be used to filter keystrokes that do not match (defaults to undefined) An input mask regular expression that will be used to filter keystrokes that do not match (defaults to undefined)

maxHeight : Number The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300) The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)

maxLength : Number Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide... Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back tracking. To restrict the maximum number of characters that can be entered into the field use the enforceMaxLength option.

maxLengthText : String Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxL... Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxLength}')

maxWidth : Number The maximum value in pixels which this Component will set its width to. Warning: This will override any size manageme... The maximum value in pixels which this Component will set its width to. Warning: This will override any size management applied by layout managers.

minChars : Number The minimum number of characters the user must type before autocomplete and typeAhead activate (defaults to 4 if quer... The minimum number of characters the user must type before autocomplete and typeAhead activate (defaults to 4 if queryMode = 'remote' or 0 if queryMode = 'local', does not apply if editable = false).

minChars : Number The minimum number of characters the user must type before autocomplete and typeAhead activate (defaults to 4 if mode... The minimum number of characters the user must type before autocomplete and typeAhead activate (defaults to 4 if mode = 'remote' or 0 if mode = 'local', does not apply if editable = false).

minHeight : Number The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges ... The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges (defaults to 90)

minLength : Number Minimum input field length required (defaults to 0) Minimum input field length required (defaults to 0)

minLengthText : String Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minL... Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minLength}')

minListWidth : Number The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value) The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)

minWidth : Number The minimum value in pixels which this Component will set its width to. Warning: This will override any size manageme... The minimum value in pixels which this Component will set its width to. Warning: This will override any size management applied by layout managers.

mode : String Acceptable values are: <div class="mdetail-params"> 'remote' : Default <p class="sub-desc">Automatically loads the st... Acceptable values are: 'remote' : Default Automatically loads the store the first time the trigger is clicked. If you do not want the store to be automatically loaded the first time the trigger is clicked, set to 'local' and manually load the store. To force a requery of the store every time the trigger is clicked see lastQuery. 'local' : ComboBox loads local data var combo = new Ext.form.ComboBox({ renderTo: document.body, mode: 'local', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', // numeric value is the key 'displayText' ], data: [[1, 'item1'], [2, 'item2']] // data is local }), valueField: 'myId', displayField: 'displayText', triggerAction: 'all' });

multiSelect : Boolean If set to true, allows the combo field to hold more than one value at a time, and allows selecting multiple items fro... If set to true, allows the combo field to hold more than one value at a time, and allows selecting multiple items from the dropdown list. The combo's text field will show all selected values separated by the delimiter. (Defaults to false.)

overCls : String An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and... An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and removed when the mouse moves out. (defaults to ''). This can be useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.

padding : Number/String Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it can b... Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10'.

pageSize : Number If greater than 0, a Ext.PagingToolbar is displayed in the footer of the dropdown list and the filter queries will ex... If greater than 0, a Ext.PagingToolbar is displayed in the footer of the dropdown list and the filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0).

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

queryDelay : Number The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown ... The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown list (defaults to 500 if queryMode = 'remote' or 10 if queryMode = 'local')

queryMode : String The mode for queries. Acceptable values are: <div class="mdetail-params"> 'remote' : Default <p class="sub-desc">Auto... The mode for queries. Acceptable values are: 'remote' : Default Automatically loads the store the first time the trigger is clicked. If you do not want the store to be automatically loaded the first time the trigger is clicked, set to 'local' and manually load the store. To force a requery of the store every time the trigger is clicked see lastQuery. 'local' : ComboBox loads local data var combo = new Ext.form.ComboBox({ renderTo: document.body, queryMode: 'local', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', // numeric value is the key 'displayText' ], data: [[1, 'item1'], [2, 'item2']] // data is local }), valueField: 'myId', displayField: 'displayText', triggerAction: 'all' });

queryParam : String Name of the query (baseParam name for the store) as it will be passed on the querystring (defaults to 'query') Name of the query (baseParam name for the store) as it will be passed on the querystring (defaults to 'query')

readOnly : Boolean true to prevent the user from changing the field, and hides the trigger. Supercedes the editable and hideTrigger opt... true to prevent the user from changing the field, and hides the trigger. Supercedes the editable and hideTrigger options if the value is true. (defaults to false)

regex : RegExp A JavaScript RegExp object to be tested against the field value during validation (defaults to undefined). If the tes... A JavaScript RegExp object to be tested against the field value during validation (defaults to undefined). If the test fails, the field will be marked invalid using regexText.

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

renderSelectors. : Object An object containing properties specifying DomQuery selectors which identify child elements created by the render pro... An object containing properties specifying DomQuery selectors which identify child elements created by the render process. After the Component's internal structure is rendered according to the renderTpl, this object is iterated through, and the found Elements are added as properties to the Component using the renderSelector property name. For example, a Component which rendered an image, and description into its element might use the following properties coded into its prototype: renderTpl: '"{imageUrl}" class="x-image-component-img">"x-image-component-desc">{description}', renderSelectors: { image: 'img.x-image-component-img', descEl: 'div.x-image-component-desc' } After rendering, the Component would have a property image referencing its child img Element, and a property descEl referencing the div Element which contains the description.

renderTo : Mixed Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ... Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes : Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items. When using this config, a call to render() is not required. See render also.

renderTpl : Mixed An XTemplate used to create the internal structure inside this Component's encapsulating Element. You do not normally... An XTemplate used to create the internal structure inside this Component's encapsulating Element. You do not normally need to specify this. For the base classes Ext.Component and Ext.container.Container, this defaults to null which means that they will be initially rendered with no internal structure; they render their Element empty. The more specialized ExtJS and Touch classes which use a more complex DOM structure, provide their own template definitions. This is intended to allow the developer to create application-specific utility Components with customized internal structure. Upon rendering, any created child elements may be automatically imported into object properties using the renderSelectors option.

repeatTriggerClick : Boolean true to attach a click repeater to the trigger. Defaults to false. true to attach a click repeater to the trigger. Defaults to false.

resizable : Boolean true to add a resize handle to the bottom of the dropdown list (creates an Ext.Resizable with 'se' pinned handles). D... true to add a resize handle to the bottom of the dropdown list (creates an Ext.Resizable with 'se' pinned handles). Defaults to false.

selectOnFocus : Boolean true to select any existing text in the field immediately on focus. Only applies when editable = true (defaults to fa... true to select any existing text in the field immediately on focus. Only applies when editable = true (defaults to false).

selectOnTab : Boolean Whether the Tab key should select the currently highlighted item. Defaults to true. Whether the Tab key should select the currently highlighted item. Defaults to true.

selectedClass : String CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected') CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')

shadow : Boolean/String true or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right true or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right

store : Ext.data.Store/Array The data source to which this combo is bound (defaults to undefined). Acceptable values for this property are: <div c... The data source to which this combo is bound (defaults to undefined). Acceptable values for this property are: any Store subclass an Array : Arrays will be converted to a Ext.data.ArrayStore internally, automatically generating field names to work with all data components. 1-dimensional array : (e.g., ['Foo','Bar']) A 1-dimensional array will automatically be expanded (each array item will be used for both the combo valueField and displayField) 2-dimensional array : (e.g., [['f','Foo'],['b','Bar']]) For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo valueField, while the value at index 1 is assumed to be the combo displayField. See also queryMode.

stripCharsRe : RegExp A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to undefined). A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to undefined).

style : String A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.core.Eleme... A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.core.Element.applyStyles. new Ext.Panel({ title: 'Some Title', renderTo: Ext.getBody(), width: 400, height: 300, layout: 'form', items: [{ xtype: 'textarea', style: { width: '95%', marginBottom: '10px' } }, new Ext.Button({ text: 'Send', minWidth: '100', style: { marginBottom: '10px' } }) ] });

styleHtmlCls : String The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html' The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html'

styleHtmlContent : String True to automatically style the html inside the content target of this component (body for panels). Defaults to false... True to automatically style the html inside the content target of this component (body for panels). Defaults to false.

submitValue : Boolean False to clear the name attribute on the field so that it is not submitted during a form post. If a hiddenName is spe... False to clear the name attribute on the field so that it is not submitted during a form post. If a hiddenName is specified, setting this to true will cause both the hidden field and the element to be submitted. Defaults to undefined.

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

title : String If supplied, a header element is created containing this text and added into the top of the dropdown list (defaults t... If supplied, a header element is created containing this text and added into the top of the dropdown list (defaults to undefined, with no header element)

tpl : String/Ext.XTemplate The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. The dropdown list is... The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. The dropdown list is displayed in a DataView. See view. The default template string is: '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>' Override the default value to create custom UI layouts for items in the list. For example: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>' The template must contain one or more substitution parameters using field names from the Combo's Store. In the example above an ext:qtip attribute is added to display other fields from the Store. To preserve the default visual look of list items, add the CSS class name x-combo-list-item to the template's container element. Also see itemSelector for additional details.

tplWriteMode : String The Ext.(X)Template method to use when updating the content area of the Component. Defaults to 'overwrite' (see Ext.X... The Ext.(X)Template method to use when updating the content area of the Component. Defaults to 'overwrite' (see Ext.XTemplate.overwrite).

transform : Mixed The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. Note that if you specify this and th... The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. Note that if you specify this and the combo is going to be in an Ext.form.Basic or Ext.form.FormPanel, you must also set lazyRender = true.

triggerAction : String The action to execute when the trigger is clicked. <div class="mdetail-params"> 'query' : Default <p class="sub-desc"... The action to execute when the trigger is clicked. 'query' : Default run the query using the raw value. 'all' : run the query specified by the allQuery config option See also queryParam.

triggerAction : String The action to execute when the trigger is clicked. <div class="mdetail-params"> 'all' : Default <p class="sub-desc">r... The action to execute when the trigger is clicked. 'all' : Default run the query specified by the allQuery config option 'query' : run the query using the raw value. See also queryParam.

triggerBaseCls : String The base CSS class that is always added to the trigger button. The triggerCls will be appended in addition to this cl... The base CSS class that is always added to the trigger button. The triggerCls will be appended in addition to this class.

triggerClass : String An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' and... An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' and triggerClass will be appended if specified (defaults to 'x-form-arrow-trigger' which displays a downward arrow icon).

triggerCls : String An additional CSS class used to style the trigger button. The trigger will always get the triggerBaseCls by default a... An additional CSS class used to style the trigger button. The trigger will always get the triggerBaseCls by default and triggerCls will be appended if specified. Defaults to 'x-form-arrow-trigger' for ComboBox.

triggerWrapCls : String The CSS class that is added to the div wrapping the trigger button(s). The CSS class that is added to the div wrapping the trigger button(s).

typeAhead : Boolean true to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if ... true to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if it matches a known value (defaults to false)

typeAheadDelay : Number The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250... The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250)

ui : String A set of predefined ui styles for individual components. Most components support 'light' and 'dark'. Extra string add... A set of predefined ui styles for individual components. Most components support 'light' and 'dark'. Extra string added to the baseCls with an extra '-'. new Ext.Panel({ title: 'Some Title', baseCls: 'x-component' ui: 'green' }); The ui configuration in this example would add 'x-component-green' as an additional class.

validator : Function A custom validation function to be called during field validation (validateValue) (defaults to undefined). If specifi... A custom validation function to be called during field validation (validateValue) (defaults to undefined). If specified, this function will be called first, allowing the developer to override the default validation process. This function will be passed the following Parameters: value: Mixed The current field value This function is to Return: true: Boolean true if the value is valid msg: String An error message if the value is invalid

valueField : String

valueField : String The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'field2' if tran... The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'field2' if transforming a select or if the field name is autogenerated based on the store configuration). Note: use of a valueField requires the user to make a selection in order for a value to be mapped. See also hiddenName, hiddenValue, and displayField.

valueNotFoundText : String When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will be d... When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined). If this default text is used, it means there is no value set and no validation will occur on this field.

vtype : String A validation type name as defined in Ext.form.VTypes (defaults to undefined) A validation type name as defined in Ext.form.VTypes (defaults to undefined)

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

width : Number The width of this component in pixels. The width of this component in pixels.

wrapFocusClass : String The class added to the to the element wrapping the field and trigger, when the field has focus. Defaults to x-form-tr... The class added to the to the element wrapping the field and trigger, when the field has focus. Defaults to x-form-trigger-wrap-focus.

`Properties`

draggable : Boolean Read-only property indicating whether or not the component can be dragged Read-only property indicating whether or not the component can be dragged

frameSize : Object Read-only property indicating the width of any framing elements which were added within the encapsulating element to ... Read-only property indicating the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the frame config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: top The width of the top framing element in pixels. right The width of the right framing element in pixels. bottom The width of the bottom framing element in pixels. left The width of the left framing element in pixels.

inputEl : Ext.core.Element The input Element for this Field. Only available after the field has been rendered.

isExpanded : Boolean

keyNav : Ext.util.KeyNav <p>A {@link Ext.util.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions based on keystrokes typed when the input field is focused.</p> <p><b>After the ComboBox has been rendered</b>, you may override existing navigation key functionality, or add your own based upon key names as specified in the {@link Ext.util.KeyNav KeyNav} class.</p> <p>The function is executed in the scope (<code>this</code> reference of the ComboBox. Example:</p><pre><code> myCombo.keyNav.esc = function(e) { // Override ESC handling function this.collapse(); // Standard behaviour of Ext's ComboBox. this.setValue(this.startValue); // We reset to starting value on ESC }; myCombo.keyNav.tab = function() { // Override TAB handling function this.onViewClick(false); // Select the currently highlighted row }; </code></pre>

lastQuery : String The value of the match string used to filter the store. Delete this property to force a requery. Example use: var com... The value of the match string used to filter the store. Delete this property to force a requery. Example use: var combo = new Ext.form.ComboBox({ ... mode: 'remote', ... listeners: { // delete the previous query in the beforequery event or set // combo.lastQuery = null (this will reload the store the next time it expands) beforequery: function(qe){ delete qe.combo.lastQuery; } } }); To make sure the filter in the store is not cleared the first time the ComboBox trigger is used configure the combo with lastQuery=''. Example use: var combo = new Ext.form.ComboBox({ ... mode: 'local', triggerAction: 'all', lastQuery: '' });

lastQuery : String The value of the match string used to filter the store. Delete this property to force a requery. Example use: var com... The value of the match string used to filter the store. Delete this property to force a requery. Example use: var combo = new Ext.form.ComboBox({ ... queryMode: 'remote', listeners: { // delete the previous query in the beforequery event or set // combo.lastQuery = null (this will reload the store the next time it expands) beforequery: function(qe){ delete qe.combo.lastQuery; } } }); To make sure the filter in the store is not cleared the first time the ComboBox trigger is used configure the combo with lastQuery=''. Example use: var combo = new Ext.form.ComboBox({ ... queryMode: 'local', triggerAction: 'all', lastQuery: '' });

ownerCt : Ext.Container This Component's owner Container (defaults to undefined, and is set automatically when this Component is added to a C... This Component's owner Container (defaults to undefined, and is set automatically when this Component is added to a Container). Read-only. Note: to access items within the Container see itemId.

rendered : Boolean Read-only property indicating whether or not the component has been rendered. Read-only property indicating whether or not the component has been rendered.

triggerEl : Ext.CompositeElement A composite of all the trigger button elements. Only set after the field has been rendered.

triggerWrap : Ext.core.Element A reference to the div element wrapping the trigger button(s). Only set after the field has been rendered.

view : Ext.DataView The DataView used to display the ComboBox's options. The DataView used to display the ComboBox's options.

{Ext.ZIndexManager} : Object zIndexManager Optional. Only valid for floating Components. A reference to the ZIndexManager that should manage this ... zIndexManager Optional. Only valid for floating Components. A reference to the ZIndexManager that should manage this Component. This defaults to the global Ext.WindowMgr for floating Components that are programatically rendered. For floating Components which are added at a Container, the Container assigns a ZIndexManager.

`Methods`

( String eventName, Function handler, [Object scope] ) : Void Removes an event handler (shorthand for removeListener.) Removes an event handler (shorthand for removeListener.)Parameters eventName : StringThe type of event the handler was associated with. handler : FunctionThe handler to remove. This must be a reference to the function passed into the addListener call. scope : Object(optional) The scope originally specified for the handler. Returns Void

addCls : Void Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component.

addEvents( Object|String o, string Optional. ) : Void Adds the specified events to the list of events which this Observable may fire. Adds the specified events to the list of events which this Observable may fire.Parameters o : Object|StringEither an object with event names as properties with a value of true or the first event name string if multiple event names are being passed as separate parameters. Optional. : stringEvent name if multiple event names are being passed as separate parameters. Usage:this.addEvents('storeloaded', 'storecleared'); Returns Void

addListener( String eventName, Function handler, [Object scope], [Object options] ) : Void Appends an event handler to this object. Appends an event handler to this object.Parameters eventName : StringThe name of the event to listen for. May also be an object who's property names are event names. See handler : FunctionThe method the event invokes. scope : Object(optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. options : Object(optional) An object containing handler configuration. properties. This may contain any of the following properties: scope : ObjectThe scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. delay : NumberThe number of milliseconds to delay the invocation of the handler after the event fires. single : BooleanTrue to add a handler to handle just the next firing of the event, and then remove itself. buffer : NumberCauses the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place. target : ObservableOnly call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable. element : StringThis option is only valid for listeners bound to Components. The name of a Component property which references an element to add a listener to. This option is useful during Component construction to add DOM event listeners to elements of Components which will exist only after the Component is rendered. For example, to add a click listener to a Panel's body: new Ext.Panel({ title: 'The title', listeners: { click: this.handlePanelClick, element: 'body' } }); When added in this way, the options available are the options applicable to Ext.core.Element.addListener Combining Options Using the options argument, it is possible to combine different types of listeners: A delayed, one-time listener. myPanel.on('hide', this.handleClick, this, { single: true, delay: 100 }); Attaching multiple handlers in 1 call 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, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution });. Returns Void

addManagedListener( Observable|Element item, Object|String ename, Function fn, Object scope, Object opt ) : Void Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed... Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed. Parameters item : Observable|ElementThe item to which to add a listener/listeners. ename : Object|StringThe event name, or an object containing event name properties. fn : FunctionOptional. If the ename parameter was an event name, this is the handler function. scope : ObjectOptional. If the ename parameter was an event name, this is the scope (this reference) in which the handler function is executed. opt : ObjectOptional. If the ename parameter was an event name, this is the addListener options. Returns Void

afterComponentLayout( Ext.Component this, Number adjWidth, Number adjHeight ) : Void Parameters this : Ext.Component adjWidth : NumberThe box-adjusted width that was set adjHeight : NumberThe box-adjusted height that was set Returns Void

applyToMarkup( String/HTMLElement el ) : Void Apply this component to existing markup that is valid. With this function, no call to render() is required. Apply this component to existing markup that is valid. With this function, no call to render() is required.Parameters el : String/HTMLElement Returns Void

bubble( Function fn, [Object scope], [Array args] ) : Ext.Component Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of... Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped.Parameters fn : FunctionThe function to call scope : Object(optional) The scope of the function (defaults to current node) args : Array(optional) The args to call the function with (default to passing the current component) Returns Ext.Component this

capture( Observable o, Function fn, [Object scope] ) : Void Starts capture on the specified Observable. All events will be passed to the supplied function with the event name + ... Starts capture on the specified Observable. All events will be passed to the supplied function with the event name + standard signature of the event before the event is fired. If the supplied function returns false, the event will not fire.Parameters o : ObservableThe Observable to capture events from. fn : FunctionThe function to call when an event is fired. scope : Object(optional) The scope (this reference) in which the function is executed. Defaults to the Observable firing the event. Returns Void

clearInvalid : Void Clear any invalid styles/messages for this field Clear any invalid styles/messages for this field

clearListeners : Void Removes all listeners for this object including the managed listeners Removes all listeners for this object including the managed listeners

clearManagedListeners : Void Removes all managed listeners for this object. Removes all managed listeners for this object.

clearValue : Void Clears any text/value currently set in the field Clears any text/value currently set in the field

cloneConfig( Object overrides ) : Ext.Component Clone the current component using the original config values passed into this instance by default. Clone the current component using the original config values passed into this instance by default.Parameters overrides : ObjectA new config containing any properties to override in the cloned version. An id property can be passed on this object, otherwise one will be generated to avoid duplicates. Returns Ext.Component clone The cloned copy of this component

collapse : Void Hides the dropdown list if it is currently expanded. Fires the collapse event on completion. Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.

createAlias( String eventName, Function handler, [Object scope], [Object options] ) : Void Appends an event handler to this object (shorthand for addListener.) Appends an event handler to this object (shorthand for addListener.)Parameters eventName : StringThe type of event to listen for handler : FunctionThe method the event invokes scope : Object(optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. options : Object(optional) An object containing handler configuration. Returns Void

destroy : Void Destroys the Component. Destroys the Component.

disable( Boolean silent ) : Void Disable the component. Disable the component.Parameters silent : BooleanPassing true, will supress the 'disable' event from being fired. Returns Void

doAutoRender : Void Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them wit... Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body

doComponentLayout : Ext.container.Container This method needs to be called whenever you change something on this component that requires the components layout to... This method needs to be called whenever you change something on this component that requires the components layout to be recalculated.

doQuery( String queryString, Boolean forceAll ) : Boolean Executes a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the ... Executes a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the query action to be canceled if needed.Parameters queryString : StringThe SQL query to execute forceAll : Booleantrue to force the query to execute even if there are currently fewer characters in the field than the minimum specified by the minChars config option. It also clears any filter previously saved in the current store (defaults to false) Returns Boolean true if the query was permitted to run, false if it was cancelled by a {@link #beforequery} handler.

enable( Boolean silent ) : Void Enable the component Enable the componentParameters silent : BooleanPassing false will supress the 'enable' event from being fired. Returns Void

enableBubble( String/Array events ) : Void Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present.... Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: Ext.override(Ext.form.Field, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : Ext.Function.createSequence(Ext.form.Field.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); Parameters events : String/ArrayThe event name to bubble, or an Array of event names. Returns Void

expand : Void Expands the dropdown list if it is currently hidden. Fires the expand event on completion. Expands the dropdown list if it is currently hidden. Fires the expand event on completion.

findParentBy( Function fn ) : Ext.container.Container Find a container above this component at any level by a custom function. If the passed function returns true, the con... Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.Parameters fn : FunctionThe custom function to call with the arguments (container, this component). Returns Ext.container.Container The first Container for which the custom function returns true

findParentByType( String/Class xtype ) : Ext.container.Container Find a container above this component at any level by xtype or class See also the up method. Find a container above this component at any level by xtype or class See also the up method. Parameters xtype : String/ClassThe xtype string for a component, or the class of the component directly Returns Ext.container.Container The first Container which matches the given xtype or class

fireEvent( String eventName, Object... args ) : Boolean Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse... Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble. Parameters eventName : StringThe name of the event to fire. args : Object...Variable number of parameters are passed to handlers. Returns Boolean returns false if any of the handlers return false otherwise it returns true.

focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component Try to focus this component. Try to focus this component.Parameters selectText : Boolean(optional) If applicable, true to also select the text in this component delay : Boolean/Number(optional) Delay the focus this number of milliseconds (true for 10 milliseconds) Returns Ext.Component this

getBox( [Boolean local] ) : Object Gets the current box measurements of the component's underlying element. Gets the current box measurements of the component's underlying element.Parameters local : Boolean(optional) If true the element's left and top are returned instead of page XY (defaults to false) Returns Object box An object in the format {x, y, width, height}

getBubbleTarget : Ext.container.Container Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.

getEl : Void Retrieves the top level element representing this component. Retrieves the top level element representing this component.

getErrors( Mixed value ) : Array Validates a value according to the field's validation rules and returns an array of errors for any failing validation... Validates a value according to the field's validation rules and returns an array of errors for any failing validations. Validation rules are processed in the following order: 1. Field specific validator A validator offers a way to customize and reuse a validation specification. If a field is configured with a validator function, it will be passed the current field value. The validator function is expected to return either: Boolean true if the value is valid (validation continues). a String to represent the invalid message if invalid (validation halts). 2. Basic Validation If the validator has not halted validation, basic validation proceeds as follows: allowBlank : (Invalid message = emptyText) Depending on the configuration of allowBlank, a blank field will cause validation to halt at this step and return Boolean true or false accordingly. minLength : (Invalid message = minLengthText) If the passed value does not satisfy the minLength specified, validation halts. maxLength : (Invalid message = maxLengthText) If the passed value does not satisfy the maxLength specified, validation halts. 3. Preconfigured Validation Types (VTypes) If none of the prior validation steps halts validation, a field configured with a vtype will utilize the corresponding VTypes validation function. If invalid, either the field's vtypeText or the VTypes vtype Text property will be used for the invalid message. Keystrokes on the field will be filtered according to the VTypes vtype Mask property. 4. Field specific regex test If none of the prior validation steps halts validation, a field's configured regex test will be processed. The invalid message for this test is configured with regexText. Parameters value : MixedThe value to validate. The processed raw value will be used if nothing is passed Returns Array Array of any validation errors getHeight : Number Gets the current height of the component's underlying element. Gets the current height of the component's underlying element. getId : Void Retrieves the id of this component. Will autogenerate an id if one has not already been set. Retrieves the id of this component. Will autogenerate an id if one has not already been set. getInputId : Void Returns the input id for this field. If none was specified via the inputId config, then an id will be automatically g... Returns the input id for this field. If none was specified via the inputId config, then an id will be automatically generated. getInsertPosition( String/Number/Element/HTMLElement position ) : HTMLElement This function takes the position argument passed to onRender and returns a DOM element that you can use in the insert... This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore.Parameters position : String/Number/Element/HTMLElementIndex, element id or element you want to put this component before. Returns HTMLElement DOM element that you can use in the insertBefore getListParent : Void Returns the element used to house this ComboBox's pop-up list. Defaults to the document body. A custom implementation... Returns the element used to house this ComboBox's pop-up list. Defaults to the document body. A custom implementation may be provided as a configuration option if the floating list needs to be rendered to a different Element. An example might be rendering the list inside a Menu so that clicking the list does not hide the Menu:var store = new Ext.data.ArrayStore({ autoDestroy: true, fields: ['initials', 'fullname'], data : [ ['FF', 'Fred Flintstone'], ['BR', 'Barney Rubble'] ] }); var combo = new Ext.form.ComboBox({ store: store, displayField: 'fullname', emptyText: 'Select a name...', forceSelection: true, getListParent: function() { return this.el.up('.x-menu'); }, iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu mode: 'local', selectOnFocus: true, triggerAction: 'all', typeAhead: true, width: 135 }); var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [ combo // A Field in a Menu ] }); getLoader : Ext.ComponentLoader Gets the Ext.ComponentLoader for this Component. Gets the Ext.ComponentLoader for this Component. getPlugin : Void Retrieves a plugin by its pluginId which has been bound to this component. Retrieves a plugin by its pluginId which has been bound to this component. getPosition( [Boolean local] ) : Array Gets the current XY position of the component's underlying element. Gets the current XY position of the component's underlying element.Parameters local : Boolean(optional) If true the element's left and top are returned instead of page XY (defaults to false) Returns Array The XY position of the element (e.g., [100, 200]) getRawValue : String Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets the ... Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets the current value of the input element if the field has been rendered, ignoring the value if it is the emptyText. To get a normalized and converted value see getValue. getSize : Object Gets the current size of the component's underlying element. Gets the current size of the component's underlying element. getStore : Ext.data.Store Returns the store associated with this combo. Returns the store associated with this combo. getSubTplMarkup : Void getTriggerWidth : Number Get the total width of the trigger button area. Only useful after the field has been rendered. Get the total width of the trigger button area. Only useful after the field has been rendered. getValue : String Returns the currently selected field value or empty string if no value is set. Returns the currently selected field value or empty string if no value is set. getWidth : Number Gets the current width of the component's underlying element. Gets the current width of the component's underlying element. getXType : String Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex... Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage: var t = new Ext.form.Text(); alert(t.getXType()); // alerts 'textfield' getXTypes : String Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext... Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: var t = new Ext.form.Text(); alert(t.getXTypes()); // alerts 'component/field/textfield' hasListener( String eventName ) : Boolean Checks to see if this object has any listeners for a specified event Checks to see if this object has any listeners for a specified eventParameters eventName : StringThe name of the event to check for Returns Boolean True if the event is being listened for, else false isDisabled : Boolean Method to determine whether this Component is currently disabled. Method to determine whether this Component is currently disabled. isDraggable : Boolean Method to determine whether this Component is draggable. Method to determine whether this Component is draggable. isDroppable : Boolean Method to determine whether this Component is droppable. Method to determine whether this Component is droppable. isExpanded : Void Returns true if the dropdown list is expanded, else false. Returns true if the dropdown list is expanded, else false. isFloating : Boolean Method to determine whether this Component is floating. Method to determine whether this Component is floating. isHidden : Boolean Method to determine whether this Component is currently set to hidden. Method to determine whether this Component is currently set to hidden. isValid : Boolean Returns whether or not the field value is currently valid by validating the processed raw value of the field. Note: d... Returns whether or not the field value is currently valid by validating the processed raw value of the field. Note: disabled fields are always treated as valid. isVisible( Boolean deep. ) : Boolean Returns true if this component is visible. Returns true if this component is visible.Parameters deep. : BooleanOptional. Pass true to interrogate the visibility status of all parent Containers to determine whether this Component is truly visible to the user. Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating dynamically laid out UIs in a hidden Container before showing them. Returns Boolean True if this component is visible, false otherwise. isXType( String xtype, [Boolean shallow] ) : Boolean Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from th... Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the Ext.Component header. Example usage: var t = new Ext.form.Text(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from Ext.form.Field var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.Field instance Parameters xtype : StringThe xtype to check for this Component shallow : Boolean(optional) False to check whether this Component is descended from the xtype (this is the default), or true to check whether this Component is directly of the specified xtype. Returns Boolean True if this component descends from the specified xtype, false otherwise. markInvalid( [String msg] ) : Void Display an error message associated with this field, using msgTarget to determine how to display the message and appl... Display an error message associated with this field, using msgTarget to determine how to display the message and applying invalidCls to the field's UI element. Note: this method does not cause the Field's validate method to return false if the value does pass validation. So simply marking a Field as invalid will not prevent submission of forms submitted with the Ext.form.action.Action.Submit.clientValidation option set. invalid.Parameters msg : String(optional) The validation message (defaults to invalidText) Returns Void nextSibling( selector Optional. ) : Void Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed ComponentQue... Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed ComponentQuery selector. May also be refered to as prev() Parameters Optional. : selectorA ComponentQuery selector to filter the following items. Returns Void observe( Function c, Object listeners ) : Void Sets observability on the passed class constructor. This makes any event fired on any instance of the passed class al... Sets observability on the passed class constructor. This makes any event fired on any instance of the passed class also fire a single event through the class allowing for central handling of events on many instances at once. Usage: Ext.util.Observable.observe(Ext.data.Connection); Ext.data.Connection.on('beforerequest', function(con, options) { console.log('Ajax request made to ' + options.url); }); Parameters c : FunctionThe class constructor to make observable. listeners : ObjectAn object containing a series of listeners to add. See addListener. Returns Void previousSibling( selector Optional. ) : Void Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed Comp... Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed ComponentQuery selector. May also be refered to as prev() Parameters Optional. : selectorA ComponentQuery selector to filter the preceding items. Returns Void processRawValue( String value ) : String Performs any necessary manipulation of a raw String value to prepare it for conversion and/or validation. For text fi... Performs any necessary manipulation of a raw String value to prepare it for conversion and/or validation. For text fields this applies the configured stripCharsRe to the raw value.Parameters value : StringThe unprocessed string value Returns String The processed string value relayEvents( Object origin, Array events ) : Void Relays selected events from the specified Observable as if the events were fired by this. Relays selected events from the specified Observable as if the events were fired by this.Parameters origin : ObjectThe Observable whose events this object is to relay. events : ArrayArray of event names to relay. Returns Void releaseCapture( Observable o ) : Void Removes all added captures from the Observable. Removes all added captures from the Observable.Parameters o : ObservableThe Observable to release Returns Void removeCls : Void Removes a CSS class from the top level element representing this component. Removes a CSS class from the top level element representing this component. removeListener( String eventName, Function handler, [Object scope] ) : Void Removes an event handler. Removes an event handler.Parameters eventName : StringThe type of event the handler was associated with. handler : FunctionThe handler to remove. This must be a reference to the function passed into the addListener call. scope : Object(optional) The scope originally specified for the handler. Returns Void removeManagedListener( Observable|Element item, Object|String ename, Function fn, Object scope ) : Void Removes listeners that were added by the mon method. Removes listeners that were added by the mon method.Parameters item : Observable|ElementThe item from which to remove a listener/listeners. ename : Object|StringThe event name, or an object containing event name properties. fn : FunctionOptional. If the ename parameter was an event name, this is the handler function. scope : ObjectOptional. If the ename parameter was an event name, this is the scope (this reference) in which the handler function is executed. Returns Void reset : Void Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText... Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText and emptyCls if the original value was blank. resumeEvents : Void Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event... Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now. select( r undefined ) : Void Selects an item by a Model, or by a key value. Selects an item by a Model, or by a key value.Parameters undefined : r Returns Void selectByValue( String value, Boolean scrollIntoView ) : Boolean Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire. The sto... Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire. The store must be loaded and the list expanded for this function to work, otherwise use setValue.Parameters value : StringThe data value of the item to select scrollIntoView : BooleanFalse to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true) Returns Boolean True if the value matched an item in the list, else false selectText( [Number start], [Number end] ) : Void Selects text in this field Selects text in this fieldParameters start : Number(optional) The index where the selection should start (defaults to 0) end : Number(optional) The index where the selection should end (defaults to the text length) Returns Void setAutoScroll( Boolean scroll ) : Ext.BoxComponent Sets the overflow on the content element of the component. Sets the overflow on the content element of the component.Parameters scroll : BooleanTrue to allow the Component to auto scroll. Returns Ext.BoxComponent this setDisabled( Boolean disabled ) : Void Enable or disable the component. Enable or disable the component.Parameters disabled : Boolean Returns Void setDocked : Component Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of ... Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) setEditable( Boolean editable ) : Void Parameters editable : BooleanTrue to allow the user to directly edit the field text Allow or prevent the user from directly editing the field text. If false is passed, the user will only be able to modify the field using the trigger. Will also add a click event to the text field which will call the trigger. This method is the runtime equivalent of setting the 'editable' config option at config time. Returns Void setHeight( Number height ) : Ext.Component Sets the height of the component. This method fires the resize event. Sets the height of the component. This method fires the resize event.Parameters height : NumberThe new height to set. This may be one of: A Number specifying the new height in the Element's Ext.core.Element.defaultUnits (by default, pixels). A String used to set the CSS height style. undefined to leave the height unchanged. Returns Ext.Component this setLoading( Boolean/Object load, Boolean targetEl ) : Ext.LoadMask This method allows you to show or hide a LoadMask on top of this component. This method allows you to show or hide a LoadMask on top of this component.Parameters load : Boolean/ObjectTrue to show the default LoadMask or a config object that will be passed to the LoadMask constructor. False to hide the current LoadMask. targetEl : BooleanTrue to mask the targetEl of this Component instead of the this.el. For example, setting this to true on a Panel will cause only the body to be masked. (defaults to false) Returns Ext.LoadMask The LoadMask instance that has just been shown. setPagePosition( Number x, Number y, Mixed animate ) : Ext.Component Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ... Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.Parameters x : NumberThe new x position y : NumberThe new y position animate : MixedIf passed, the Component is animated into its new position. If this parameter is a number, it is used as the animation duration in milliseconds. Returns Ext.Component this setPosition( Number left, Number top, Mixed animate ) : Ext.Component Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ... Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.Parameters left : NumberThe new left top : NumberThe new top animate : MixedIf passed, the Component is animated into its new position. If this parameter is a number, it is used as the animation duration in milliseconds. Returns Ext.Component this setReadOnly( Boolean readOnly ) : Void Parameters readOnly : BooleanTrue to prevent the user changing the field and explicitly hide the trigger. Setting this to true will superceed settings editable and hideTrigger. Setting this to false will defer back to editable and hideTrigger. This method is the runtime equivalent of setting the 'readOnly' config option at config time. Returns Void setSize( Mixed width, Mixed height ) : Ext.Component Sets the width and height of this Component. This method fires the resize event. This method can accept either width ... Sets the width and height of this Component. This method fires the resize event. This method can accept either width and height as separate arguments, or you can pass a size object like {width:10, height:20}.Parameters width : MixedThe new width to set. This may be one of: A Number specifying the new width in the Element's Ext.core.Element.defaultUnits (by default, pixels). A String used to set the CSS width style. A size object in the format {width: widthValue, height: heightValue}. undefined to leave the width unchanged. height : MixedThe new height to set (not required if a size object is passed as the first arg). This may be one of: A Number specifying the new height in the Element's Ext.core.Element.defaultUnits (by default, pixels). A String used to set the CSS height style. Animation may not be used. undefined to leave the height unchanged. Returns Ext.Component this setValue( String value ) : Ext.form.Field Sets the specified value into the field. If the value finds a match, the corresponding record text will be displayed... Sets the specified value into the field. If the value finds a match, the corresponding record text will be displayed in the field. If the value does not match the data value of an existing item, and the valueNotFoundText config option is defined, it will be displayed as the default field text. Otherwise the field will be blank (although the value will still be set).Parameters value : StringThe value to match Returns Ext.form.Field this setVisible( Boolean visible ) : Ext.Component Convenience function to hide or show this component by boolean. Convenience function to hide or show this component by boolean.Parameters visible : BooleanTrue to show, false to hide Returns Ext.Component this setWidth( Number width ) : Ext.Component Sets the width of the component. This method fires the resize event. Sets the width of the component. This method fires the resize event.Parameters width : NumberThe new width to setThis may be one of: A Number specifying the new width in the Element's Ext.core.Element.defaultUnits (by default, pixels). A String used to set the CSS width style. Returns Ext.Component this show( [String/Element animateTarget], [Function callback], [Object scope] ) : Component Shows this Component, rendering it first if Ext.AbstractComponent.autoRender is true. For a Window, it activates it a... Shows this Component, rendering it first if Ext.AbstractComponent.autoRender is true. For a Window, it activates it and brings it to front if hidden. Parameters animateTarget : String/Element(optional) The target element or id from which the Component should animate while opening (defaults to null with no animation) callback : Function(optional) A callback function to call after the window is displayed. Only necessary is animation was specified. scope : Object(optional) The scope (this reference) in which the callback is executed. Defaults to this Component. Returns Component this suspendEvents( Boolean queueSuspended ) : Void Suspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents)Parameters queueSuspended : BooleanPass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events; Returns Void up( String selector ) : Ext.container.Container Walks up the ownerCt axis looking for an ancestor Container which matches the passed simple selector. Example:var own... Walks up the ownerCt axis looking for an ancestor Container which matches the passed simple selector. Example: var owningTabContainer = grid.up('tabcontainer'); Parameters selector : StringOptional. The simple selector to test. Returns Ext.container.Container The matching ancestor Container (or undefined if no match was found). update( Mixed htmlOrData, [Boolean loadScripts], [Function callback] ) : Void Update the content area of a component. Update the content area of a component.Parameters htmlOrData : MixedIf this component has been configured with a template via the tpl config then it will use this argument as data to populate the template. If this component was not configured with a template, the components content area will be updated via Ext.core.Element update loadScripts : Boolean(optional) Only legitimate when using the html configuration. Defaults to false callback : Function(optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading Returns Void updateBox( Object box ) : Ext.Component Sets the current box measurements of the component's underlying element. Sets the current box measurements of the component's underlying element.Parameters box : ObjectAn object in the format {x, y, width, height} Returns Ext.Component this validate : Boolean Validates the field value Validates the field value validateValue( Mixed value, Boolean preventMark ) : Boolean Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called with the first ... Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called with the first and false is returned, otherwise true is returned. Previously, subclasses were invited to provide an implementation of this to process validations - from 3.2 onwards getErrors should be overridden instead. Parameters value : MixedThe value to validate preventMark : Booleantrue to prevent marking the field invalid Returns Boolean True if all validations passed, false if one or more failed Events activate( Ext.Component this ) Fires after a Component has been visually activated. Fires after a Component has been visually activated.Parameters this : Ext.Component Returns Void added( Ext.Component this, Ext.container.Container container, Number pos ) Fires after a Component had been added to a Container. Fires after a Component had been added to a Container.Parameters this : Ext.Component container : Ext.container.ContainerParent Container pos : Numberposition of Component Returns Void afterrender( Ext.Component this ) Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere... Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored. Parameters this : Ext.Component Returns Void autosize( Ext.form.Text this, Number width ) Fires when the autoSize function is triggered and the field is resized according to the grow/growMin/growMax configs ... Fires when the autoSize function is triggered and the field is resized according to the grow/growMin/growMax configs as a result. This event provides a hook for the developer to apply additional logic at runtime to resize the field if needed.Parameters this : Ext.form.TextThis text field width : NumberThe new field width Returns Void beforeactivate( Ext.Component this ) Fires before a Component has been visually activated. Returning false from an event listener can prevent the activate... Fires before a Component has been visually activated. Returning false from an event listener can prevent the activate from occurring.Parameters this : Ext.Component Returns Void beforedeactivate( Ext.Component this ) Fires before a Component has been visually deactivated. Returning false from an event listener can prevent the deacti... Fires before a Component has been visually deactivated. Returning false from an event listener can prevent the deactivate from occurring.Parameters this : Ext.Component Returns Void beforedestroy( Ext.Component this ) Fires before the component is destroyed. Return false from an event handler to stop the destroy. Fires before the component is destroyed. Return false from an event handler to stop the destroy.Parameters this : Ext.Component Returns Void beforehide( Ext.Component this ) Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hid... Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hide.Parameters this : Ext.Component Returns Void beforequery( Object queryEvent ) Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to t... Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to true.Parameters queryEvent : ObjectAn object that has these properties: combo : Ext.form.ComboBox This combo box query : String The query forceAll : Boolean True to force "all" query cancel : Boolean Set to true to cancel the query Returns Void beforequery( Object queryEvent ) Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to t... Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to true.Parameters queryEvent : ObjectAn object that has these properties: combo : Ext.form.ComboBox This combo box query : String The query string forceAll : Boolean True to force "all" query cancel : Boolean Set to true to cancel the query Returns Void beforerender( Ext.Component this ) Fires before the component is rendered. Return false from an event handler to stop the render. Fires before the component is rendered. Return false from an event handler to stop the render.Parameters this : Ext.Component Returns Void beforeselect( Ext.form.ComboBox combo, Ext.data.Record record, Number index ) Fires before a list item is selected. Return false to cancel the selection. Fires before a list item is selected. Return false to cancel the selection.Parameters combo : Ext.form.ComboBoxThis combo box record : Ext.data.RecordThe data record returned from the underlying store index : NumberThe index of the selected item in the dropdown list Returns Void beforeshow( Ext.Component this ) Fires before the component is shown when calling the show method. Return false from an event handler to stop the show... Fires before the component is shown when calling the show method. Return false from an event handler to stop the show.Parameters this : Ext.Component Returns Void blur( Ext.form.BaseField this ) Fires when this field loses input focus. Fires when this field loses input focus.Parameters this : Ext.form.BaseField Returns Void collapse( Ext.form.ComboBox combo ) Fires when the dropdown list is collapsed Fires when the dropdown list is collapsedParameters combo : Ext.form.ComboBoxThis combo box Returns Void deactivate( Ext.Component this ) Fires after a Component has been visually deactivated. Fires after a Component has been visually deactivated.Parameters this : Ext.Component Returns Void destroy( Ext.Component this ) Fires after the component is destroyed. Fires after the component is destroyed.Parameters this : Ext.Component Returns Void disable( Ext.Component this ) Fires after the component is disabled. Fires after the component is disabled.Parameters this : Ext.Component Returns Void enable( Ext.Component this ) Fires after the component is enabled. Fires after the component is enabled.Parameters this : Ext.Component Returns Void expand( Ext.form.ComboBox combo ) Fires when the dropdown list is expanded Fires when the dropdown list is expandedParameters combo : Ext.form.ComboBoxThis combo box Returns Void focus( Ext.form.BaseField this ) Fires when this field receives input focus. Fires when this field receives input focus.Parameters this : Ext.form.BaseField Returns Void hide( Ext.Component this ) Fires after the component is hidden. Fires after the component is hidden when calling the hide method. Fires after the component is hidden. Fires after the component is hidden when calling the hide method.Parameters this : Ext.Component Returns Void keydown( Ext.form.Text this, Ext.EventObject e ) Keydown input field event. This event only fires if enableKeyEvents is set to true. Keydown input field event. This event only fires if enableKeyEvents is set to true.Parameters this : Ext.form.TextThis text field e : Ext.EventObject Returns Void keypress( Ext.form.Text this, Ext.EventObject e ) Keypress input field event. This event only fires if enableKeyEvents is set to true. Keypress input field event. This event only fires if enableKeyEvents is set to true.Parameters this : Ext.form.TextThis text field e : Ext.EventObject Returns Void keyup( Ext.form.Text this, Ext.EventObject e ) Keyup input field event. This event only fires if enableKeyEvents is set to true. Keyup input field event. This event only fires if enableKeyEvents is set to true.Parameters this : Ext.form.TextThis text field e : Ext.EventObject Returns Void move( Ext.Component this, Number x, Number y ) Fires after the component is moved. Fires after the component is moved.Parameters this : Ext.Component x : NumberThe new x position y : NumberThe new y position Returns Void removed( Ext.Component this, Ext.container.Container ownerCt ) Fires when a component is removed from an Ext.container.Container Fires when a component is removed from an Ext.container.ContainerParameters this : Ext.Component ownerCt : Ext.container.ContainerContainer which holds the component Returns Void render( Ext.Component this ) Fires after the component markup is rendered. Fires after the component markup is rendered.Parameters this : Ext.Component Returns Void resize( Ext.Component this, Number adjWidth, Number adjHeight ) Fires after the component is resized. Fires after the component is resized.Parameters this : Ext.Component adjWidth : NumberThe box-adjusted width that was set adjHeight : NumberThe box-adjusted height that was set Returns Void select( Ext.form.ComboBox combo, Ext.data.Record record, Number index ) Fires when a list item is selected Fires when a list item is selectedParameters combo : Ext.form.ComboBoxThis combo box record : Ext.data.RecordThe data record returned from the underlying store index : NumberThe index of the selected item in the dropdown list Returns Void show( Ext.Component this ) Fires after the component is shown when calling the show method. Fires after the component is shown when calling the show method.Parameters this : Ext.Component Returns Void specialkey( Ext.form.BaseField this, Ext.EventObject e ) Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.pan... Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.panel.Panel.keys or Ext.KeyMap. You can check Ext.EventObject.getKey to determine which key was pressed. For example: var form = new Ext.form.FormPanel({ ... items: [{ fieldLabel: 'Field 1', name: 'field1', allowBlank: false },{ fieldLabel: 'Field 2', name: 'field2', listeners: { specialkey: function(field, e){ // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN, // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN if (e.getKey() == e.ENTER) { var form = field.ownerCt.getForm(); form.submit(); } } } } ], ... }); Parameters this : Ext.form.BaseField e : Ext.EventObjectThe event object Returns Void

Sencha Documentation

Ext.form.ComboBox

Super classes

Mixins

Config Options

Properties

Methods

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

`Properties`

`Methods`