Print Friendly

Class Ext.form.ComboBox

Package:Ext.form
Class:ComboBox
Extends:TriggerField
Defined In:Combo.js
A combobox control with support for autocomplete, remote-loading, paging and many other features.

Properties   -  Methods   -  Events   -  Config Options

Public Properties

Property Defined By
  disabled : Object Component
true if this component is disabled. Read-only.
  disabledClass : Object Component
CSS class added to the component when it is disabled.
  hidden : Object Component
true if this component is hidden. Read-only.
  rendered : Object Component
true if this component has been rendered. Read-only.

Public Methods

Method Defined By
  ComboBox(Object config) ComboBox
Create a new ComboBox.
  addEvents(Object object) : void Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
  addListener(String eventName, Function handler, [Object scope], [Object options]) : void Observable
Appends an event handler to this component
  applyTo(String/HTMLElement/Element el) : Ext.form.Field Field
Apply the behaviors of this component to an existing element. This is used instead of render().
  autoSize() : void TextField
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only ta...
  clearInvalid() : void Field
Clear any invalid styles/messages for this field
  clearValue() : void ComboBox
Clears any text/value currently set in the field
  collapse() : void ComboBox
Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
  disable() : void Component
Disable this component
  doQuery(String query, Boolean forceAll) : void ComboBox
Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the ...
  enable() : void Component
Enable this component
  expand() : void ComboBox
Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
  fireEvent(String eventName, Object... args) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  focus(Boolean selectText) : void Component
Try to focus this component
  getEl() : Ext.Element Component
Returns the underlying Ext.Element
  getId() : String Component
Returns the id of this component
  getName() : String Field
Returns the name attribute of the field if available
  getRawValue() : Mixed Field
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
  getValue() : String ComboBox
Returns the currently-selected field value or empty string if no value is set.
  hasListener(String eventName) : Boolean Observable
Checks to see if this object is currently listening for a specified event
  hide() : void Component
Hide this component
  isExpanded() : void ComboBox
Returns true if the dropdown list is expanded, else false.
  isValid(Boolean preventMark) : Boolean Field
Returns whether or not the field value is currently valid
  isVisible() : void Component
Returns true if this component is visible
  markInvalid(String msg) : void Field
Mark this field as invalid
  on(String eventName, Function handler, [Object options]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  onTriggerClick(EventObject e) : void TriggerField
The function that should handle the trigger's click event. This method does nothing by default until overridden by a...
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener
  render([String/HTMLElement/Element container]) : void Component
If this is a lazy rendering component, render it to its container element
  reset() : void Field
Resets the current field value to the originally-loaded value and clears any validation messages
  select(Number index, Boolean scrollIntoView) : void ComboBox
Select an item in the dropdown list by its numeric index in the list
  selectByValue(String value, Boolean scrollIntoView) : Boolean ComboBox
Select an item in the dropdown list by its data value
  selectNext() : void ComboBox
Select the next item in the dropdown list (selects the first item by default if no items are currently selected)
  selectPrev() : void ComboBox
Select the previous item in the dropdown list (selects the first item by default if no items are currently selected)
  selectText([Number start], [Number end]) : void TextField
Selects text in this field
  setDisabled(Boolean disabled) : void Component
Convenience function for setting disabled/enabled by boolean
  setEditable() : void ComboBox
Allow or prevent the user from directly editing the field text. If false is passed in, the user will only be able to...
  setRawValue(Mixed value) : void Field
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
  setSize(Number width, Number height) : void Field
Sets the height and width of the field
  setValue(String value) : void ComboBox
Sets the specified value into the field. If the value finds a match, the corresponding record text will be displayed...
  setVisible(Boolean visible) : void Component
Convenience function to hide or show this component by boolean
  show() : void Component
Show this component
  un(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener (shorthand for removeListener)
  validate() : Boolean Field
Validates the field value
  validateValue(Mixed value) : Boolean TextField
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails

Public Events

Event Defined By
  autosize : (Ext.form.Field this, Number width) TextField
Fires when the autosize function is triggered. The field may or may not have actually changed size according to the ...
  beforedestroy : (Ext.Component this) Component
Fires before the component is destroyed
  beforehide : (Ext.Component this) Component
Fires before the component is hidden
  beforequery : (Object e) ComboBox
Fires before all queries are processed. Return false to cancel the query or set cancel to true. The event object pass...
  beforerender : (Ext.Component this) Component
Fires before the component is rendered
  beforeselect : (Ext.form.ComboBox combo, Ext.data.Record record, Number index) ComboBox
Fires before a list item is selected. Return false to cancel the selection.
  beforeshow : (Ext.Component this) Component
Fires before the component is shown
  blur : (Ext.form.Field this) Field
Fires when
  change : (Ext.form.Field this, Mixed value, Mixed value) Field
Fires just before the field blurs if the field value has changed
  collapse : (Ext.form.ComboBox combo) ComboBox
Fires when the dropdown list is collapsed
  destroy : (Ext.Component this) Component
Fires after the component is destroyed
  disable : (Ext.Component this) Component
Fires after the component is disabled
  enable : (Ext.Component this) Component
Fires after the component is enabled
  expand : (Ext.form.ComboBox combo) ComboBox
Fires when the dropdown list is expanded
  focus : (Ext.form.Field this) Field
Fires when this field receives input focus
  hide : (Ext.Component this) Component
Fires after the component is hidden
  invalid : (Ext.form.Field this, String msg) Field
Fires after the field has been marked as invalid
  render : (Ext.Component this) Component
Fires after the component is rendered
  select : (Ext.form.ComboBox combo, Ext.data.Record record, Number index) ComboBox
Fires when a list item is selected
  show : (Ext.Component this) Component
Fires after the component is shown
  specialkey : (Ext.form.Field this, Ext.EventObject e) Field
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObject.g...
  valid : (Ext.form.Field this) Field
Fires after the field has been validated with no errors

Config Options

Config Options Defined By
  allQuery : String ComboBox
The text query to send to the server to return all records for the list with no filtering (defaults to '')
  allowBlank : Boolean TextField
False to validate that the value length > 0 (defaults to true)
  autoCreate : Boolean/Object ComboBox
A DomHelper element spec, or true for a default element spec (defaults to: {tag: "input", type: "text", size: "24", a...
  blankText : String TextField
Error text to display if the allow blank validation fails (defaults to "This field is required")
  disableKeyFilter : Boolean TextField
True to disable input keystroke filtering (defaults to false)
  displayField : String ComboBox
The underlying data field name to bind to this CombBox (defaults to undefined if mode = 'remote' or 'text' if mode = ...
  editable : Boolean ComboBox
False to prevent the user from typing text directly into the field, just like a traditional select (defaults to true)
  emptyClass : String TextField
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is aut...
  emptyText : String TextField
The default text to display in an empty field (defaults to null).
  fieldClass : String Field
The default CSS class for the field (defaults to "x-form-field")
  focusClass : String Field
The CSS class to use when the field receives focus (defaults to "x-form-focus")
  forceSelection : Boolean ComboBox
True to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text i...
  grow : Boolean TextField
True if this field should automatically grow and shrink to its content
  growMax : Number TextField
The maximum width to allow when grow = true (defaults to 800)
  growMin : Number TextField
The minimum width to allow when grow = true (defaults to 30)
  handleHeight : Number ComboBox
The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
  hiddenName : String ComboBox
If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults t...
  hideTrigger : Boolean TriggerField
True to hide the trigger element and display only the base text field (defaults to false)
  inputType : String Field
The type attribute for input fields - e.g. radio, text, password. (defaults to "text")
  invalidClass : String Field
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
  invalidText : String Field
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
  lazyRender : Boolean ComboBox
True to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor,...
  listAlign : String ComboBox
A valid anchor position value. See Ext.Element.alignTo for details on supported anchor positions (defaults to 'tl-bl')
  listClass : String ComboBox
CSS class to apply to the dropdown list element (defaults to '')
  listWidth : Number ComboBox
The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
  loadingText : String ComboBox
The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loadi...
  maskRe : String TextField
An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
  maxHeight : Number ComboBox
The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
  maxLength : Number TextField
Maximum input field length allowed (defaults to Number.MAX_VALUE)
  maxLengthText : String TextField
Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxL...
  minChars : Number ComboBox
The minimum number of characters the user must type before autocomplete and typeahead activate (defaults to 4, does n...
  minLength : Number TextField
Minimum input field length required (defaults to 0)
  minLengthText : String TextField
Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minL...
  minListWidth : Number ComboBox
The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)
  mode : String ComboBox
Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
  msgFx : String Field
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
  msgTarget : String Field
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value Desc...
  pageSize : Number ComboBox
If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the filter queries will execu...
  queryDelay : Number ComboBox
The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown ...
  queryParam : String ComboBox
Name of the query as it will be passed on the querystring (defaults to 'query')
  regex : RegExp TextField
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, t...
  regexText : String TextField
The error text to display if regex is used and the test fails during validation (defaults to "")
  resizable : Boolean ComboBox
True to add a resize handle to the bottom of the dropdown list (defaults to false)
  selectOnFocus : Boolean ComboBox
True to select any existing text in the field immediately on focus. Only applies when editable = true (defaults to fa...
  selectedClass : String ComboBox
CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
  shadow : Boolean/String ComboBox
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
  transform : String/HTMLElement/Element ComboBox
The id, DOM node or element of an existing select to convert to a ComboBox
  triggerAction : String ComboBox
The action to execute when the trigger field is activated. Use 'all' to run the query specified by the allQuery confi...
  triggerClass : String ComboBox
An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' and ...
  typeAhead : Boolean ComboBox
True to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if ...
  typeAheadDelay : Number ComboBox
The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250)
  validateOnBlur : String/Boolean Field
Defaults to true.
  validationDelay : Number Field
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
  validationEvent : String/Boolean Field
The event that should initiate field validation. Set to false to disable automatic validation. (defaults to "keyup")
  validator : Function TextField
A custom validation function to be called during field validation (defaults to null). If available, this function wil...
  value : Mixed Field
A value to initialize this field with
  valueField : String ComboBox
The underlying data value name to bind to this CombBox (defaults to undefined if mode = 'remote' or 'value' if mode =...
  valueNotFoundText : String ComboBox
When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will be d...
  vtype : String TextField
A validation type name as defined in Ext.form.VTypes (defaults to null)

Property Details

disabled

public Object disabled
true if this component is disabled. Read-only.
This property is defined by Component.

disabledClass

public Object disabledClass
CSS class added to the component when it is disabled.
This property is defined by Component.

hidden

public Object hidden
true if this component is hidden. Read-only.
This property is defined by Component.

rendered

public Object rendered
true if this component has been rendered. Read-only.
This property is defined by Component.

Constructor Details

ComboBox

public function ComboBox(Object config)
Create a new ComboBox.
Parameters:
  • config : Object
    Configuration options

Method Details

addEvents

public function addEvents(Object object)
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:
  • object : Object
    The object from which to copy events
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} True to prevent the default action
    • stopPropagation {Boolean} True to prevent event propagation
    • normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
    • delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
    • single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} Causes 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.

    Combining Options
    Using the options argument, it is possible to combine different types of listeners:

    A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

    Code: 
    el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

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

    Attaching multiple handlers in 1 call
    Code: 

    el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });

    Or a shorthand syntax:
    Code: 

    el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
Returns:
  • void
This method is defined by Observable.

applyTo

public function applyTo(String/HTMLElement/Element el)
Apply the behaviors of this component to an existing element. This is used instead of render().
Parameters:
  • el : String/HTMLElement/Element
    The id of the node, a DOM Node or an existing Element
Returns:
  • Ext.form.Field
    this
This method is defined by Field.

autoSize

public function autoSize()
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true and fires the autosize event.
Parameters:
  • None.
Returns:
  • void
This method is defined by TextField.

clearInvalid

public function clearInvalid()
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
This method is defined by Field.

clearValue

public function clearValue()
Clears any text/value currently set in the field
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

collapse

public function collapse()
Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

disable

public function disable()
Disable this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

doQuery

public function doQuery(String query, Boolean forceAll)
Execute 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:
  • query : String
    The sql query to execute
  • forceAll : Boolean
    True 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:
  • void
This method is defined by ComboBox.

enable

public function enable()
Enable this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

expand

public function expand()
Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

fireEvent

public function fireEvent(String eventName, Object... args)
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • 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
This method is defined by Observable.

focus

public function focus(Boolean selectText)
Try to focus this component
Parameters:
  • selectText : Boolean
    True to also select the text in this component (if applicable)
Returns:
  • void
This method is defined by Component.

getEl

public function getEl()
Returns the underlying Ext.Element
Parameters:
  • None.
Returns:
  • Ext.Element
    The element
This method is defined by Component.

getId

public function getId()
Returns the id of this component
Parameters:
  • None.
Returns:
  • String
This method is defined by Component.

getName

public function getName()
Returns the name attribute of the field if available
Parameters:
  • None.
Returns:
  • String
    name The field name
This method is defined by Field.

getRawValue

public function getRawValue()
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
This method is defined by Field.

getValue

public function getValue()
Returns the currently-selected field value or empty string if no value is set.
Parameters:
  • None.
Returns:
  • String
    value The selected value
This method is defined by ComboBox.

hasListener

public function hasListener(String eventName)
Checks to see if this object is currently listening for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

hide

public function hide()
Hide this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

isExpanded

public function isExpanded()
Returns true if the dropdown list is expanded, else false.
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

isValid

public function isValid(Boolean preventMark)
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
This method is defined by Field.

isVisible

public function isVisible()
Returns true if this component is visible
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

markInvalid

public function markInvalid(String msg)
Mark this field as invalid
Parameters:
  • msg : String
    The validation message
Returns:
  • void
This method is defined by Field.

on

public function on(String eventName, Function handler, [Object options])
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

onTriggerClick

public function onTriggerClick(EventObject e)
The function that should handle the trigger's click event. This method does nothing by default until overridden by a handler implementation.
Parameters:
  • e : EventObject
Returns:
  • void
This method is defined by TriggerField.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

render

public function render([String/HTMLElement/Element container])
If this is a lazy rendering component, render it to its container element
Parameters:
  • container : String/HTMLElement/Element
    (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
Returns:
  • void
This method is defined by Component.

reset

public function reset()
Resets the current field value to the originally-loaded value and clears any validation messages
Parameters:
  • None.
Returns:
  • void
This method is defined by Field.

select

public function select(Number index, Boolean scrollIntoView)
Select an item in the dropdown list by its numeric index in the list
Parameters:
  • index : Number
    The zero-based index of the list item to select
  • scrollIntoView : Boolean
    False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
Returns:
  • void
This method is defined by ComboBox.

selectByValue

public function selectByValue(String value, Boolean scrollIntoView)
Select an item in the dropdown list by its data value
Parameters:
  • value : String
    The data value of the item to select
  • scrollIntoView : Boolean
    False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
Returns:
  • Boolean
    valueFound True if the value matched an item in the list, else false
This method is defined by ComboBox.

selectNext

public function selectNext()
Select the next item in the dropdown list (selects the first item by default if no items are currently selected)
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

selectPrev

public function selectPrev()
Select the previous item in the dropdown list (selects the first item by default if no items are currently selected)
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

selectText

public function selectText([Number start], [Number end])
Selects text in this field
Parameters:
  • 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
This method is defined by TextField.

setDisabled

public function setDisabled(Boolean disabled)
Convenience function for setting disabled/enabled by boolean
Parameters:
  • disabled : Boolean
Returns:
  • void
This method is defined by Component.

setEditable

public function setEditable()
Allow or prevent the user from directly editing the field text. If false is passed in, the user will only be able to select from the items defined in the dropdown list. This method is the runtime equivalent of setting the editable config option at config time.
Parameters:
  • None.
Returns:
  • void
This method is defined by ComboBox.

setRawValue

public function setRawValue(Mixed value)
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • void
This method is defined by Field.

setSize

public function setSize(Number width, Number height)
Sets the height and width of the field
Parameters:
  • width : Number
    The new field width in pixels
  • height : Number
    The new field height in pixels
Returns:
  • void
This method is defined by Field.

setValue

public function setValue(String value)
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 : String
    The value to match
Returns:
  • void
This method is defined by ComboBox.

setVisible

public function setVisible(Boolean visible)
Convenience function to hide or show this component by boolean
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • void
This method is defined by Component.

show

public function show()
Show this component
Parameters:
  • None.
Returns:
  • void
This method is defined by Component.

un

public function un(String eventName, Function handler, [Object scope])
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

validate

public function validate()
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
This method is defined by Field.

validateValue

public function validateValue(Mixed value)
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Parameters:
  • value : Mixed
    The value to validate
Returns:
  • Boolean
    True if the value is valid, else false
This method is defined by TextField.

Event Details

autosize

public event autosize
Fires when the autosize function is triggered. The field may or may not have actually changed size according to the default logic, but this event provides a hook for the developer to apply additional logic at runtime to resize the field if needed.
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
    This text field
  • width : Number
    The new field width
This event is defined by TextField.

beforedestroy

public event beforedestroy
Fires before the component is destroyed
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

beforehide

public event beforehide
Fires before the component is hidden
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

beforequery

public event beforequery
Fires before all queries are processed. Return false to cancel the query or set cancel to true. The event object passed has these properties:
  • {Ext.form.ComboBox} combo - This combo box
  • {String} query - The query
  • {Boolean} forceAll - true to force "all" query
  • {Boolean} cancel - set to true to cancel the query.
Subscribers will be called with the following parameters:
  • e : Object
    The query event object
This event is defined by ComboBox.

beforerender

public event beforerender
Fires before the component is rendered
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

beforeselect

public event beforeselect
Fires before a list item is selected. Return false to cancel the selection.
Subscribers will be called with the following parameters:
  • combo : Ext.form.ComboBox
    This combo box
  • record : Ext.data.Record
    The data record returned from the underlying store
  • index : Number
    The index of the selected item in the dropdown list
This event is defined by ComboBox.

beforeshow

public event beforeshow
Fires before the component is shown
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

blur

public event blur
Fires when
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
This event is defined by Field.

change

public event change
Fires just before the field blurs if the field value has changed
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
  • value : Mixed
    The changed value
  • value : Mixed
    The original value
This event is defined by Field.

collapse

public event collapse
Fires when the dropdown list is collapsed
Subscribers will be called with the following parameters:
  • combo : Ext.form.ComboBox
    This combo box
This event is defined by ComboBox.

destroy

public event destroy
Fires after the component is destroyed
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

disable

public event disable
Fires after the component is disabled
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

enable

public event enable
Fires after the component is enabled
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

expand

public event expand
Fires when the dropdown list is expanded
Subscribers will be called with the following parameters:
  • combo : Ext.form.ComboBox
    This combo box
This event is defined by ComboBox.

focus

public event focus
Fires when this field receives input focus
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
This event is defined by Field.

hide

public event hide
Fires after the component is hidden
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

invalid

public event invalid
Fires after the field has been marked as invalid
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
  • msg : String
    The validation message
This event is defined by Field.

render

public event render
Fires after the component is rendered
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

select

public event select
Fires when a list item is selected
Subscribers will be called with the following parameters:
  • combo : Ext.form.ComboBox
    This combo box
  • record : Ext.data.Record
    The data record returned from the underlying store
  • index : Number
    The index of the selected item in the dropdown list
This event is defined by ComboBox.

show

public event show
Fires after the component is shown
Subscribers will be called with the following parameters:
  • this : Ext.Component
This event is defined by Component.

specialkey

public event specialkey
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObject.getKey to determine which key was pressed.
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
This event is defined by Field.

valid

public event valid
Fires after the field has been validated with no errors
Subscribers will be called with the following parameters:
  • this : Ext.form.Field
This event is defined by Field.

Config Details

allQuery

allQuery : String
The text query to send to the server to return all records for the list with no filtering (defaults to '')
This config option is defined by ComboBox.

allowBlank

allowBlank : Boolean
False to validate that the value length > 0 (defaults to true)
This config option is defined by TextField.

autoCreate

autoCreate : Boolean/Object
A DomHelper element spec, or true for a default element spec (defaults to: {tag: "input", type: "text", size: "24", autocomplete: "off"})
This config option is defined by ComboBox.

blankText

blankText : String
Error text to display if the allow blank validation fails (defaults to "This field is required")
This config option is defined by TextField.

disableKeyFilter

disableKeyFilter : Boolean
True to disable input keystroke filtering (defaults to false)
This config option is defined by TextField.

displayField

displayField : String
The underlying data field name to bind to this CombBox (defaults to undefined if mode = 'remote' or 'text' if mode = 'local')
This config option is defined by ComboBox.

editable

editable : Boolean
False to prevent the user from typing text directly into the field, just like a traditional select (defaults to true)
This config option is defined by ComboBox.

emptyClass

emptyClass : String
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.
This config option is defined by TextField.

emptyText

emptyText : String
The default text to display in an empty field (defaults to null).
This config option is defined by TextField.

fieldClass

fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
This config option is defined by Field.

focusClass

focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
This config option is defined by Field.

forceSelection

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 into the field (defaults to false)
This config option is defined by ComboBox.

grow

grow : Boolean
True if this field should automatically grow and shrink to its content
This config option is defined by TextField.

growMax

growMax : Number
The maximum width to allow when grow = true (defaults to 800)
This config option is defined by TextField.

growMin

growMin : Number
The minimum width to allow when grow = true (defaults to 30)
This config option is defined by TextField.

handleHeight

handleHeight : Number
The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
This config option is defined by ComboBox.

hiddenName

hiddenName : String
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)
This config option is defined by ComboBox.

hideTrigger

hideTrigger : Boolean
True to hide the trigger element and display only the base text field (defaults to false)
This config option is defined by TriggerField.

inputType

inputType : String
The type attribute for input fields - e.g. radio, text, password. (defaults to "text")
This config option is defined by Field.

invalidClass

invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
This config option is defined by Field.

invalidText

invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
This config option is defined by Field.

lazyRender

lazyRender : Boolean
True to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor, defaults to false)
This config option is defined by ComboBox.

listAlign

listAlign : String
A valid anchor position value. See Ext.Element.alignTo for details on supported anchor positions (defaults to 'tl-bl')
This config option is defined by ComboBox.

listClass

listClass : String
CSS class to apply to the dropdown list element (defaults to '')
This config option is defined by ComboBox.

listWidth

listWidth : Number
The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
This config option is defined by ComboBox.

loadingText

loadingText : String
The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loading...')
This config option is defined by ComboBox.

maskRe

maskRe : String
An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
This config option is defined by TextField.

maxHeight

maxHeight : Number
The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
This config option is defined by ComboBox.

maxLength

maxLength : Number
Maximum input field length allowed (defaults to Number.MAX_VALUE)
This config option is defined by TextField.

maxLengthText

maxLengthText : String
Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
This config option is defined by TextField.

minChars

minChars : Number
The minimum number of characters the user must type before autocomplete and typeahead activate (defaults to 4, does not apply if editable = false)
This config option is defined by ComboBox.

minLength

minLength : Number
Minimum input field length required (defaults to 0)
This config option is defined by TextField.

minLengthText

minLengthText : String
Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
This config option is defined by TextField.

minListWidth

minListWidth : Number
The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)
This config option is defined by ComboBox.

mode

mode : String
Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
This config option is defined by ComboBox.

msgFx

msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
This config option is defined by Field.

msgTarget

msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): 
 Value Description ----------- ---------------------------------------------------------------------- qtip Display a quick tip when the user hovers over the field title Display a default browser title attribute popup under Add a block div beneath the field containing the error text side Add an error icon to the right of the field with a popup on hover [element id] Add the error text directly to the innerHTML of the specified element
This config option is defined by Field.

pageSize

pageSize : Number
If greater than 0, a paging toolbar 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)
This config option is defined by ComboBox.

queryDelay

queryDelay : Number
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 mode = 'remote' or 10 if mode = 'local')
This config option is defined by ComboBox.

queryParam

queryParam : String
Name of the query as it will be passed on the querystring (defaults to 'query')
This config option is defined by ComboBox.

regex

regex : RegExp
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
This config option is defined by TextField.

regexText

regexText : String
The error text to display if regex is used and the test fails during validation (defaults to "")
This config option is defined by TextField.

resizable

resizable : Boolean
True to add a resize handle to the bottom of the dropdown list (defaults to false)
This config option is defined by ComboBox.

selectOnFocus

selectOnFocus : Boolean
True to select any existing text in the field immediately on focus. Only applies when editable = true (defaults to false)
This config option is defined by ComboBox.

selectedClass

selectedClass : String
CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
This config option is defined by ComboBox.

shadow

shadow : Boolean/String
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
This config option is defined by ComboBox.

transform

transform : String/HTMLElement/Element
The id, DOM node or element of an existing select to convert to a ComboBox
This config option is defined by ComboBox.

triggerAction

triggerAction : String
The action to execute when the trigger field is activated. Use 'all' to run the query specified by the allQuery config option (defaults to 'query')
This config option is defined by ComboBox.

triggerClass

triggerClass : String
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).
This config option is defined by ComboBox.

typeAhead

typeAhead : Boolean
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)
This config option is defined by ComboBox.

typeAheadDelay

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

validateOnBlur

validateOnBlur : String/Boolean
Defaults to true.
This config option is defined by Field.

validationDelay

validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
This config option is defined by Field.

validationEvent

validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation. (defaults to "keyup")
This config option is defined by Field.

validator

validator : Function
A custom validation function to be called during field validation (defaults to null). If available, this function will be called only after the basic validators all return true, and will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
This config option is defined by TextField.

value

value : Mixed
A value to initialize this field with
This config option is defined by Field.

valueField

valueField : String
The underlying data value name to bind to this CombBox (defaults to undefined if mode = 'remote' or 'value' if mode = 'local')
This config option is defined by ComboBox.

valueNotFoundText

valueNotFoundText : String
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)
This config option is defined by ComboBox.

vtype

vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
This config option is defined by TextField.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.