打印版式

Class Ext.form.TextField

Package:Ext.form
Class:TextField
Extends:Field
Subclasses:NumberField, TextArea, TriggerField
Defined In:TextField.js
Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base class for more sophisticated input controls (like Ext.form.TextArea and Ext.form.ComboBox).

属性   -  方法   -  事件   -  设置选项

公共属性

属性 定义对象
  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.

公共方法

方法 定义对象
  TextField(Object config) TextField
Creates a new TextField
  addEvents(Object object) : void Observable
将对象中没有的事件从给出的对象中复制过来。
  addListener(String eventName, Function handler, [Object scope], [Object options]) : void Observable
为该组件加入事件处理器函数
  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
  disable() : void Component
Disable this component
  enable() : void Component
Enable this component
  fireEvent(String eventName, Object... args) : Boolean Observable
触发指定的事件, 并将参数传入(至少要有事件名称)。
  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() : 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
检查该对象是否拥有指定事件的侦听器
  hide() : void Component
Hide this component
  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
为该组件加入事件处理器函数, addListener 的简写方式
  purgeListeners() : void Observable
从对象身上移除所有的侦听器
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
移除侦听器
  render([String/HTMLElement/Element container]) : void Component
If this is a lazy rendering component, render it to its container element
  reset() : void TextField
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText...
  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
  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(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) : 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
移除侦听器, 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

公共事件

事件 定义对象
  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
  beforerender : (Ext.Component this) Component
Fires before the component is rendered
  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
  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
  render : (Ext.Component this) Component
Fires after the component is rendered
  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)
  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")
  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 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)
  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 Desc...
  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)

属性详情

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.

构造函数

TextField

public function TextField(Object config)
Creates a new TextField
参数:
  • config : Object
    Configuration options

方法详情

addEvents

public function addEvents(Object object)
将对象中没有的事件从给出的对象中复制过来。给出的对象必须也继承于 Observable 对象此方法才会有效果。
参数:
  • object : Object
    要复制事件的源对象
返回:
  • void
This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])
为组件添加一个事件监听器
参数:
  • eventName : String
    侦听事件的类型
  • handler : Function
    事件调用的方法
  • scope : Object
    (可选)处理函数执行的作用域。处理函数 "this" 的内容。
  • options : Object
    (可选)一个包含处理设置属性的对象。可以包含下列的属性:
    • scope {Object} 处理函数执行的作用域。处理函数 "this" 的内容。
    • delegate {String} 一个简单的选择器用来过滤目标或查找目标的子节点。
    • stopEvent {Boolean} 值为 True 时用来中止事件。那样将中止传播,并防止缺省动作。
    • preventDefault {Boolean} 值为 True 时用来防止缺省动作。
    • stopPropagation {Boolean} 值为 True 时用来中止事件传播。
    • normalized {Boolean} 值为 False 时向处理函数传递浏览器事件用以代替 Ext.EventObject 对象。
    • delay {Number} 当事件触发后启用处理函数的延迟微秒数。
    • single {Boolean} 值为 True 时将添加一个处理函数用来处理下个触发的事件,并在处理完后移除。
    • buffer {Number} 使处理函数计划在由 Ext.util.DelayedTask 指定的微秒数后执行。如果事件在延迟期间再次触发,原来的处理函数将不再启动,而是由新的计划代替。

    组合选项
    使用选项参数可以组合不同类型的监听器:

    下面是一个标准的、延迟执行的、一次性的监听器,将会自动停止事件并传递一个自定义的参数(forumId)

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

    这个方法也允许传递的单个参数是一个包含多个指定处理函数的设置对象。

    一次调用多个处理函数
    代码:

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

    或者简写为:
    代码:

    el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
返回:
  • 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().
参数:
  • el : String/HTMLElement/Element
    The id of the node, a DOM Node or an existing Element
返回:
  • 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.
参数:
  • 无。
返回:
  • void
This method is defined by TextField.

clearInvalid

public function clearInvalid()
Clear any invalid styles/messages for this field
参数:
  • 无。
返回:
  • void
This method is defined by Field.

disable

public function disable()
Disable this component
参数:
  • 无。
返回:
  • void
This method is defined by Component.

enable

public function enable()
Enable this component
参数:
  • 无。
返回:
  • void
This method is defined by Component.

fireEvent

public function fireEvent(String eventName, Object... args)
触发指定的事件并给出参数(至少要有事件名称)。
参数:
  • eventName : String
  • args : Object...
    传入处理函数的参数
返回:
  • Boolean
    如果任何处理函数返回 false 则返回值为 false, 否则返回 true。
This method is defined by Observable.

focus

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

getEl

public function getEl()
Returns the underlying Ext.Element
参数:
  • 无。
返回:
  • Ext.Element
    The element
This method is defined by Component.

getId

public function getId()
Returns the id of this component
参数:
  • 无。
返回:
  • String
This method is defined by Component.

getName

public function getName()
Returns the name attribute of the field if available
参数:
  • 无。
返回:
  • 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.
参数:
  • 无。
返回:
  • 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.
参数:
  • 无。
返回:
  • Mixed
    value The field value
This method is defined by Field.

hasListener

public function hasListener(String eventName)
检查该对象是否拥有指定事件的侦听器
参数:
  • eventName : String
    查询事件之名称
返回:
  • Boolean
    值为 True 值表示事件监听器存在, 否则值为 false。
This method is defined by Observable.

hide

public function hide()
Hide this component
参数:
  • 无。
返回:
  • void
This method is defined by Component.

isValid

public function isValid(Boolean preventMark)
Returns whether or not the field value is currently valid
参数:
  • preventMark : Boolean
    True to disable marking the field invalid
返回:
  • 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
参数:
  • 无。
返回:
  • void
This method is defined by Component.

markInvalid

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

on

public function on(String eventName, Function handler, [Object options])
为该组件加入事件处理器函数, addListener 的简写方式
参数:
  • eventName : String
    侦听事件的类型
  • handler : Function
    事件调用的方法
  • options : Object
    (可选)
返回:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
从对象身上移除所有的侦听器
参数:
  • 无。
返回:
  • void
This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
移除侦听器
参数:
  • eventName : String
    侦听事件的类型
  • handler : Function
    删除的处理函数
  • scope : Object
    (可选) The scope (this object) for the handler
返回:
  • 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
参数:
  • container : String/HTMLElement/Element
    (可选) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
返回:
  • 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. Also adds emptyText and emptyClass if the original value was blank.
参数:
  • 无。
返回:
  • void
This method is defined by TextField.

selectText

public function selectText([Number start], [Number end])
Selects text in this field
参数:
  • start : Number
    (可选) The index where the selection should start (defaults to 0)
  • end : Number
    (可选) The index where the selection should end (defaults to the text length)
返回:
  • void
This method is defined by TextField.

setDisabled

public function setDisabled(Boolean disabled)
Convenience function for setting disabled/enabled by boolean
参数:
  • disabled : Boolean
返回:
  • void
This method is defined by Component.

setRawValue

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

setSize

public function setSize(Number width, Number height)
Sets the height and width of the field
参数:
  • width : Number
    The new field width in pixels
  • height : Number
    The new field height in pixels
返回:
  • 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.
参数:
  • value : Mixed
    The value to set
返回:
  • void
This method is defined by Field.

setVisible

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

show

public function show()
Show this component
参数:
  • 无。
返回:
  • void
This method is defined by Component.

un

public function un(String eventName, Function handler, [Object scope])
移除侦听器, removeListener 的简写方式
参数:
  • eventName : String
    侦听事件的类型
  • handler : Function
    删除的处理函数
  • scope : Object
    (可选) The scope (this object) for the handler
返回:
  • void
This method is defined by Observable.

validate

public function validate()
Validates the field value
参数:
  • 无。
返回:
  • 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
参数:
  • value : Mixed
    The value to validate
返回:
  • Boolean
    True if the value is valid, else false
This method is defined by TextField.

事件详情

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.

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.

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.

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.

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.

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.

设置详情

allowBlank

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

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.

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

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.

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.

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.