Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Field
        TextField
          TriggerField
            ComboBox

Class Ext.form.ComboBox

Package:Ext.form
Defined In:Combo.js
Class:ComboBox
Subclasses:TimeField
Extends:TriggerField

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

Config OptionsDefined By
 allQuery : String
The text query to send to the server to return all records for the list with no filtering (defaults to '')
ComboBox
 allowBlank : Boolean
Specify false to validate that the value's length is > 0 (defaults to true)
TextField
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 blankText : String
The error text to display if the allowBlank validation fails (defaults to 'This field is required')
TextField
 clearFilterOnReset : Boolean
true to clear any filters on the store (when in local mode) when reset is called (defaults to true)
ComboBox
 cls : String
A custom CSS class to apply to the field's underlying element (defaults to '').
Field
 data : Mixed
The initial set of data to apply to the tpl to update the content area of the Component.
Component
 disableKeyFilter : Boolean
Specify true to disable input keystroke filtering (defaults to false)
TextField
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 enableKeyEvents : Boolean
true to enable the proxying of key events for the HTML input field (defaults to false)
TextField
 fieldClass : String
The default CSS class for the field (defaults to 'x-form-field')
Field
 focusClass : String
The CSS class to use when the field receives focus (defaults to 'x-form-focus')
Field
 handleHeight : Number
The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
ComboBox
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 hideTrigger : Boolean
true to hide the trigger element and display only the base text field (defaults to false)
TriggerField
 invalidClass : String
The CSS class to use when marking a field invalid (defaults to 'x-form-invalid')
Field
 lazyInit : Boolean
true to not initialize the list for this combo until the field is focused (defaults to true)
ComboBox
 listClass : String
The CSS class to add to the predefined 'x-combo-list' class applied the dropdown list element (defaults to '').
ComboBox
 listEmptyText : String
The empty text to display in the data view if no items are found. (defaults to '')
ComboBox
 maskRe : RegExp
An input mask regular expression that will be used to filter keystrokes that do not match (defaults to null)
TextField
 maxHeight : Number
The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
ComboBox
 minLength : Number
Minimum input field length required (defaults to 0)
TextField
 minListWidth : Number
The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)
ComboBox
 msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 preventMark : Boolean
true to disable marking the field invalid. Defaults to false.
Field
 queryParam : String
Name of the query (baseParam name for the store) as it will be passed on the querystring (defaults to 'query')
ComboBox
 regexText : String
The error text to display if regex is used and the test fails during validation (defaults to '')
TextField
 selectedClass : String
CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
ComboBox
 shadow : Boolean/String
true or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
ComboBox
 stripCharsRe : RegExp
A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
 validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
 validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
 value : Mixed
A value to initialize this field with (defaults to undefined).
Field
 vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
 wrapFocusClass : String
The class added to the to the wrap of the trigger element. Defaults to x-trigger-wrap-focus.
TriggerField
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 disabled : Boolean
True if this component is disabled. Read-only.
Component
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 keyNav : Ext.KeyNav <p>A {@link Ext.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.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>
ComboBox
 rendered : Boolean
True if this component has been rendered. Read-only.
Component
 view : Ext.DataView
The DataView used to display the ComboBox's options.
ComboBox

Public Methods

MethodDefined By

Public Events

EventDefined By