Print Friendly

Class Ext.form.NumberField

Package:Ext.form
Class:NumberField
Extends:TextField
Defined In:NumberField.js
Numeric text field that provides automatic keystroke filtering and numeric validation.

Properties   -  Methods   -  Events   -  Config Options

Public Properties

This class has no public properties.

Public Methods

Method Defined By
  NumberField(Object config) NumberField
Creates a new NumberField
  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
  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() : Mixed Field
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...
  initComponent() : void Field
*
  isDirty() : void Field
Returns true if this field has ben 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
  markInvalid(String msg) : void Field
Mark this field as invalid
  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
  setRawValue(Mixed value) : void Field
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
  setValue(Mixed value) : void Field
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
  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 ...
  blur : (Ext.form.Field this) Field
Fires when this field loses input focus.
  change : (Ext.form.Field this, Mixed value, Mixed value) Field
Fires just before the field blurs if the field value has changed.
  focus : (Ext.form.Field this) Field
Fires when this field receives input focus.
  invalid : (Ext.form.Field this, String msg) Field
Fires after the field has been marked as invalid.
  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
  allowBlank : Boolean TextField
False to validate that the value length > 0 (defaults to true)
  allowDecimals : Boolean NumberField
False to disallow decimal values (defaults to true)
  allowNegative : Boolean NumberField
False to require only positive numbers (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")
  decimalPrecision : Number NumberField
The maximum precision to display after the decimal separator (defaults to 2)
  decimalSeparator : String NumberField
Character(s) to allow as the decimal separator (defaults to '.')
  disableKeyFilter : Boolean TextField
True to disable input keystroke filtering (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 NumberField
The default CSS class for the field (defaults to "x-form-field x-form-num-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)
  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...
  maxText : String NumberField
Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxVal...
  maxValue : Number NumberField
The maximum allowed value (defaults to Number.MAX_VALUE)
  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...
  minText : String NumberField
Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minVal...
  minValue : Number NumberField
The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
  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...
  name : String Field
The field's HTML name attribute
  nanText : String NumberField
Error text to display if the value is not a valid number. For example, this can happen if a valid character like '.' ...
  readOnly : Boolean Field
True to mark the field as readOnly in HTML - Note: this only sets the readOnly attribute.
  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)
  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
  vtype : String TextField
A validation type name as defined in Ext.form.VTypes (defaults to null)

Constructor Details

NumberField

public function NumberField(Object config)
Creates a new NumberField
Parameters:
  • config : Object
    Configuration options

Method Details

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.

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 normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
This method is defined by Field.

initComponent

public function initComponent()
*
Parameters:
  • None.
Returns:
  • void
This method is defined by Field.

isDirty

public function isDirty()
Returns true if this field has ben changed since it was originally loaded and is not disabled.
Parameters:
  • None.
Returns:
  • void
This method is defined by Field.

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.

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.

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.

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.

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.

setValue

public function setValue(Mixed value)
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • void
This method is defined by Field.

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.

blur

public event blur
Fires when this field loses input focus.
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.

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.

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.

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

allowBlank

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

allowDecimals

allowDecimals : Boolean
False to disallow decimal values (defaults to true)
This config option is defined by NumberField.

allowNegative

allowNegative : Boolean
False to require only positive numbers (defaults to true)
This config option is defined by NumberField.

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")
This config option is defined by TextField.

decimalPrecision

decimalPrecision : Number
The maximum precision to display after the decimal separator (defaults to 2)
This config option is defined by NumberField.

decimalSeparator

decimalSeparator : String
Character(s) to allow as the decimal separator (defaults to '.')
This config option is defined by NumberField.

disableKeyFilter

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

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 x-form-num-field")
This config option is defined by NumberField.

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
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.

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

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.

maxText

maxText : String
Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
This config option is defined by NumberField.

maxValue

maxValue : Number
The maximum allowed value (defaults to Number.MAX_VALUE)
This config option is defined by NumberField.

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.

minText

minText : String
Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
This config option is defined by NumberField.

minValue

minValue : Number
The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
This config option is defined by NumberField.

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.

nanText

nanText : String
Error text to display if the value is not a valid number. For example, this can happen if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
This config option is defined by NumberField.

readOnly

readOnly : Boolean
True to mark the field as readOnly in HTML - Note: this only sets the readOnly 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.
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.

selectOnFocus

selectOnFocus : Boolean
True to automatically select any existing field text when the field receives input focus (defaults to false)
This config option is defined by TextField.

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.

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.