Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
The trigger has no default action, so you must assign a function to implement the trigger click handler by
overriding
onTriggerClick. You can create a TriggerField directly, as it renders exactly like a combobox
for which you can provide a custom implementation. For example:
var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyTo('my-field');
However, in general you will most likely want to use TriggerField as the base class for a reusable component.
Ext.form.DateField and
Ext.form.ComboBox are perfect examples of this.
|
TriggerField( Object config ) |
TriggerField |
Create a new TriggerField. |
|
addEvents( Object object ) : void |
Observable |
Used to define events on this Observable |
|
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(). |
|
clearInvalid() : void |
Field |
Clear any invalid styles/messages for this field |
|
destroy() : void |
Component |
Destroys this component by purging any event listeners, removing the component's element from the DOM,
removing the c... |
|
disable() : Ext.Component |
Component |
Disable this component. |
|
enable() : Ext.Component |
Component |
Enable this component. |
|
fireEvent( String eventName , Object... args ) : Boolean |
Observable |
Fires the specified event with the passed parameters (minus the event name). |
|
focus( Boolean selectText ) : Ext.Component |
Component |
Try to focus this component. |
|
getBox( [Boolean local ] ) : s |
BoxComponent |
Gets the current box measurements of the component's underlying element. |
|
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 |
|
getPosition( [Boolean local ] ) : Array |
BoxComponent |
Gets the current XY position of the component's underlying element. |
|
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. |
|
getSize() : Object |
BoxComponent |
Gets the current size of the component's underlying element. |
|
getValue() : Mixed |
Field |
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa... |
|
hasListener( String eventName ) : Boolean |
Observable |
Checks to see if this object has any listeners for a specified event |
|
hide() : Ext.Component |
Component |
Hide this component. |
|
isDirty() : void |
Field |
Returns true if this field has been changed since it was originally loaded and is not disabled. |
|
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 scope ], [Object options ] ) : void |
Observable |
Appends an event handler to this element (shorthand for addListener) |
|
onPosition( Number x , Number y ) : void |
BoxComponent |
Called after the component is moved, this method is empty by default but can be implemented by any
subclass that need... |
|
onResize( Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight ) : void |
BoxComponent |
Called after the component is resized, this method is empty by default but can be implemented by any
subclass that ne... |
|
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 |
|
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. |
|
setPagePosition( Number x , Number y ) : s |
BoxComponent |
Sets the page XY position of the component. To set the left and top instead, use setPosition.
This method fires the ... |
|
setPosition( Number left , Number top ) : s |
BoxComponent |
Sets the left and top of the component. To set the page XY position instead, use setPagePosition.
This method fires ... |
|
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/Object width , Number height ) : Ext.BoxComponent |
BoxComponent |
Sets the width and height of the component. This method fires the resize event. This method can accept
either width... |
|
setValue( Mixed value ) : void |
Field |
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue. |
|
setVisible( Boolean visible ) : Ext.Component |
Component |
Convenience function to hide or show this component by boolean. |
|
show() : Ext.Component |
Component |
Show this component. |
|
syncSize() : s |
BoxComponent |
Force the component's size to recalculate based on the underlying element's current height and width. |
|
un( String eventName , Function handler , [Object scope ] ) : void |
Observable |
Removes a listener (shorthand for removeListener) |
|
updateBox( Object box ) : s |
BoxComponent |
Sets the current box measurements of the component's underlying element. |
|
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 |
|
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. Return false to stop the destroy. |
|
beforehide : ( Ext.Component this ) |
Component |
Fires before the component is hidden. Return false to stop the hide. |
|
beforerender : ( Ext.Component this ) |
Component |
Fires before the component is rendered. Return false to stop the render. |
|
beforeshow : ( Ext.Component this ) |
Component |
Fires before the component is shown. Return false to stop the show. |
|
blur : ( Ext.form.Field this ) |
Field |
Fires when this field loses input focus. |
|
change : ( Ext.form.Field this , Mixed newValue , Mixed oldValue ) |
Field |
Fires just before the field blurs if the field value has changed. |
|
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. |
|
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. |
|
move : ( Ext.Component this , Number x , Number y ) |
BoxComponent |
Fires after the component is moved. |
|
render : ( Ext.Component this ) |
Component |
Fires after the component is rendered. |
|
resize : ( Ext.Component this , Number adjWidth , Number adjHeight , Number rawWidth , Number rawHeight ) |
BoxComponent |
Fires after the component is resized. |
|
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. |
|
allowBlank : Boolean |
TextField |
False to validate that the value length > 0 (defaults to true) |
|
allowDomMove : Boolean |
Component |
Whether the component can move the Dom node when rendering (defaults to true). |
|
autoCreate : String/Object |
Field |
A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", au... |
|
blankText : String |
TextField |
Error text to display if the allow blank validation fails (defaults to "This field is required") |
|
cls : String |
Field |
A CSS class to apply to the field's underlying element. |
|
disableClass : String |
Component |
CSS class added to the component when it is disabled (defaults to "x-item-disabled"). |
|
disableKeyFilter : Boolean |
TextField |
True to disable input keystroke filtering (defaults to false) |
|
disabled : Boolean |
Field |
True to disable the field (defaults to false). |
|
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") |
|
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) |
|
hideMode : String |
Component |
How this component should hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset posi... |
|
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... |
|
maskRe : String |
TextField |
An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null) |
|
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... |
|
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... |
|
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 ... |
|
name : String |
Field |
The field's HTML name attribute. |
|
readOnly : Boolean |
Field |
True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM att... |
|
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 "") |
|
selectOnFocus : Boolean |
TextField |
True to automatically select any existing field text when the field receives input focus (defaults to false) |
|
tabIndex : Number |
Field |
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT... |
|
triggerClass : String |
TriggerField |
A css class to apply to the trigger |
|
validateOnBlur : Boolean |
Field |
Whether the field should validate when it loses focus (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. |
|
vtype : String |
TextField |
A validation type name as defined in Ext.form.VTypes (defaults to null) |
allowBlank
allowBlank : Boolean
False to validate that the value length > 0 (defaults to true)
allowDomMove
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
autoCreate
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
This config option is defined by
Field.
blankText
blankText : String
Error text to display if the allow blank validation fails (defaults to "This field is required")
cls
cls : String
A CSS class to apply to the field's underlying element.
This config option is defined by
Field.
disableClass
disableClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
disableKeyFilter
disableKeyFilter : Boolean
True to disable input keystroke filtering (defaults to false)
disabled
disabled : Boolean
True to disable the field (defaults to false).
This config option is defined by
Field.
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.
emptyText
emptyText : String
The default text to display in an empty field (defaults to null).
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.
grow
grow : Boolean
True if this field should automatically grow and shrink to its content
growMax
growMax : Number
The maximum width to allow when grow = true (defaults to 800)
growMin
growMin : Number
The minimum width to allow when grow = true (defaults to 30)
hideMode
hideMode : String
How this component should hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".
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.
maskRe
maskRe : String
An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
maxLength
maxLength : Number
Maximum input field length allowed (defaults to Number.MAX_VALUE)
maxLengthText
maxLengthText : String
Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
minLength
minLength : Number
Minimum input field length required (defaults to 0)
minLengthText
minLengthText : String
Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
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.
name
name : String
The field's HTML name attribute.
This config option is defined by
Field.
readOnly
readOnly : Boolean
True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
This config option is defined by
Field.
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.
regexText
regexText : String
The error text to display if
regex is used and the test fails during validation (defaults to "")
selectOnFocus
selectOnFocus : Boolean
True to automatically select any existing field text when the field receives input focus (defaults to false)
tabIndex
tabIndex : Number
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
This config option is defined by
Field.
triggerClass
triggerClass : String
A css class to apply to the trigger
This config option is defined by TriggerField.
validateOnBlur
validateOnBlur : Boolean
Whether the field should validate when it loses focus (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.
value
value : Mixed
A value to initialize this field with.
This config option is defined by
Field.