X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..refs/heads/old:/docs/output/Ext.form.TextField.html?ds=sidebyside diff --git a/docs/output/Ext.form.TextField.html b/docs/output/Ext.form.TextField.html index 654a02d4..53c5945b 100644 --- a/docs/output/Ext.form.TextField.html +++ b/docs/output/Ext.form.TextField.html @@ -1,4 +1,8 @@ -
Observable Component BoxComponent Field TextField
Package: | Ext.form |
Defined In: | TextField.js |
Class: | TextField |
Subclasses: | NumberField, TextArea, TriggerField |
Extends: | Field |
Basic text field. Can be used as a direct replacement for traditional text inputs, +
Observable + Component + BoxComponent + Field + TextField
Package: | Ext.form |
Defined In: | TextField.js |
Class: | TextField |
Subclasses: | NumberField, TextArea, TriggerField |
Extends: | Field |
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).
Validation
@@ -41,102 +45,11 @@ element's parent node will automatically be used as the component's container. element spec. Used to create the Element which will encapsulate this ...A tag name or DomHelper spec used to create the Element which will -encapsulate this Component.
-You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, -and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex -DOM structure created by their own onRender methods.
-This is intended to allow the developer to create application-specific utility Components encapsulated by -different DOM elements. Example usage:
{
- xtype: 'box',
- autoEl: {
- tag: 'img',
- src: 'http://www.example.com/example.jpg'
- }
-}, {
- xtype: 'box',
- autoEl: {
- tag: 'blockquote',
- html: 'autoEl is cool!'
- }
-}, {
- xtype: 'container',
- autoEl: 'ul',
- cls: 'ux-unordered-list',
- items: {
- xtype: 'box',
- autoEl: 'li',
- html: 'First list item'
- }
-}
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent -Container's layout manager. Defaults to false.
-Note: Although many components inherit this config option, not all will -function as expected with a height of 'auto'. Setting autoHeight:true means that the -browser will manage height based on the element's contents, and that Ext will not manage it at all.
-If the browser is managing the height, be aware that resizes performed by the browser in response -to changes within the structure of the Component cannot be detected. Therefore changes to the height might -result in elements needing to be synchronized with the new height. Example:
var w = new Ext.Window({
- title: 'Window',
- width: 600,
- autoHeight: true,
- items: {
- title: 'Collapse Me',
- height: 400,
- collapsible: true,
- border: false,
- listeners: {
- beforecollapse: function() {
- w.el.shadow.hide();
- },
- beforeexpand: function() {
- w.el.shadow.hide();
- },
- collapse: function() {
- w.syncShadow();
- },
- expand: function() {
- w.syncShadow();
- }
- }
- }
-}).show();
{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
true
to use overflow:'auto' on the components layout element and show scroll bars automatically when
necessary, false
to clip any overflowing content (defaults to false
).True to use width:'auto', false to use fixed width (or allow it to be managed by its parent -Container's layout manager. Defaults to false.
-Note: Although many components inherit this config option, not all will -function as expected with a width of 'auto'. Setting autoWidth:true means that the -browser will manage width based on the element's contents, and that Ext will not manage it at all.
-If the browser is managing the width, be aware that resizes performed by the browser in response -to changes within the structure of the Component cannot be detected. Therefore changes to the width might -result in elements needing to be synchronized with the new width. For example, where the target element is:
<div id='grid-container' style='margin-left:25%;width:50%'></div>
-A Panel rendered into that target element must listen for browser window resize in order to relay its
-child items when the browser changes its width:var myPanel = new Ext.Panel({
- renderTo: 'grid-container',
- monitorResize: true, // relay on browser resize
- title: 'Panel',
- height: 400,
- autoWidth: true,
- layout: 'hbox',
- layoutConfig: {
- align: 'stretch'
- },
- defaults: {
- flex: 1
- },
- items: [{
- title: 'Box 1',
- }, {
- title: 'Box 2'
- }, {
- title: 'Box 3'
- }],
-});
The maximum value in pixels which this BoxComponent will set its height to.
Warning: This will override any size management applied by layout managers.
The maxi Warning: This will override any size mana...
The minimum value in pixels which this BoxComponent will set its height to.
Warning: This will override any size management applied by layout managers.
The minimum value in pixels which this BoxComponent will set its width to.
-Warning: This will override any size management applied by layout managers.
Warning: This will override any size management applied by layout managers.
An array of events that, when fired, should be bubbled to any parent container. +See Ext.util.Observable.enableBubble. +Defaults to [].
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide field clearing (defaults to 'x-form-clear-left').
@@ -455,9 +371,9 @@ validation fails (defaults to 'The maximum length for this field is {maxL...'The maximum length for this field is {maxLength}')The location where the message text set through markInvalid should display. Must be one of the following values:
qtip
Display a quick tip containing the message when the user hovers over the field. This is the default.
@@ -466,7 +382,7 @@ Must be one of the following values:
under
Add a block div beneath the field containing the error message.side
Add an error icon to the right of the field, displaying the message in a popup on hover.[element id]
Add the error message directly to the innerHTML of the specified element.Function fn
, [Object scope
], [Array args
] )
+ :
+ Ext.Componentfn
: Functionscope
: Objectargs
: ArrayExt.Component
Object overrides
)
:
@@ -772,45 +693,47 @@ should usually not need to be called directly.Ext.Component
String/Array events
)
:
- voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default -implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to -access the required target more quickly.
-Example:
Ext.override(Ext.form.Field, {
- // Add functionality to Field's initComponent to enable the change event to bubble
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
- this.enableBubble('change');
- }),
-
- // We know that we want Field's events to bubble directly to the FormPanel.
- getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
- }
-});
-
-var myForm = new Ext.formPanel({
- title: 'User Details',
- items: [{
- ...
- }],
- listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
- }
+ voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present....Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
+This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.
+Example:
Ext.override(Ext.form.Field, {
+ // Add functionality to Field's initComponent to enable the change event to bubble
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+ this.enableBubble('change');
+ }),
+
+ // We know that we want Field's events to bubble directly to the FormPanel.
+ getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
+ }
+ return this.formPanel;
+ }
+});
+
+var myForm = new Ext.formPanel({
+ title: 'User Details',
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
+ }
+ }
});
Parameters:events
: String/ArrayThe event name to bubble, or an Array of event names.
Returns:- void
Function fn
)
:
Ext.Containerfn
: FunctionExt.Container
String/Class xtype
)
+true, the container will be returned.fn
: FunctionExt.Container
String/Ext.Component/Class xtype
, [Boolean shallow
] )
:
- Ext.Containerxtype
: String/ClassExt.Container
String eventName
, Object... args
)
+ Ext.Containerxtype
: String/Ext.Component/Classshallow
: BooleanExt.Container
String eventName
, Object... args
)
:
BooleanFires the specified event with the passed parameters (minus the event name).
@@ -841,7 +764,63 @@ or use a render listener directly:new Ext.Panel({
},
single: true // Remove the listener after first invocation
}
-});
Ext.Element
Ext.Element
Mixed value
)
+ :
+ ArrayValidates a value according to the field's validation rules and returns an array of errors +for any failing validations. Validation rules are processed in the following order:
+A validator offers a way to customize and reuse a validation specification.
+If a field is configured with a validator
+function, it will be passed the current field value. The validator
+function is expected to return either:
+
If the validator
has not halted validation,
+basic validation proceeds as follows:
allowBlank
: (Invalid message =
+emptyText
)allowBlank
, a
+blank field will cause validation to halt at this step and return
+Boolean true or false accordingly.
+minLength
: (Invalid message =
+minLengthText
)minLength
+specified, validation halts.
+maxLength
: (Invalid message =
+maxLengthText
)maxLength
+specified, validation halts.
+If none of the prior validation steps halts validation, a field
+configured with a vtype
will utilize the
+corresponding VTypes validation function.
+If invalid, either the field's vtypeText
or
+the VTypes vtype Text property will be used for the invalid message.
+Keystrokes on the field will be filtered according to the VTypes
+vtype Mask property.
value
: MixedArray
Number
preventMark
: BooleanBoolean
Boolean
String xtype
, [Boolean shallow
] )
+ BooleanBoolean
String/Ext.Component/Class xtype
, [Boolean shallow
] )
:
BooleanTests whether or not this Component is of a specific xtype. This can test whether this Component is descended @@ -931,7 +910,11 @@ to participate in determination of inherited xtypes.
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
-var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
xtype
: Stringshallow
: Booleanxtype
: String/Ext.Component/Classvar c = new Ext.Component();
+console.log(c.isXType(c));
+console.log(c.isXType(Ext.Component));
shallow
: BooleanBoolean
String msg
] )
:
voidNumber start
], [Number end
] )
:
- voidstart
: Numberend
: NumberBoolean scroll
)
+ voidstart
: Numberend
: NumberString msg
, Boolean suppressEvent
)
+ :
+ voidmsg
: StringsuppressEvent
: BooleanBoolean scroll
)
:
Ext.BoxComponentscroll
: BooleanExt.BoxComponent
Boolean disabled
)
:
- Ext.Componentdisabled
: BooleanExt.Component
Number height
)
+ Ext.Componentdisabled
: BooleanExt.Component
Mixed height
)
:
- Ext.BoxComponentheight
: Numberheight
: MixedExt.BoxComponent
Number x
, Number y
)
@@ -1057,10 +1045,10 @@ This may be one of:value
: MixedExt.form.Field
Boolean visible
)
:
- Ext.Componentvisible
: BooleanExt.Component
Number width
)
+ Ext.Componentvisible
: BooleanExt.Component
Mixed width
)
:
- Ext.BoxComponentwidth
: Numberwidth
: MixedExt.BoxComponent
Ext.BoxComponent
String eventName
, Function handler
, [Object scope
] )
:
- voideventName
: Stringhandler
: Functionscope
: ObjectMixed htmlOrData
, [Boolean loadScripts
], [Function callback
] )
+ voideventName
: Stringhandler
: Functionscope
: ObjectBoolean suppressEvent
)
+ :
+ voidsuppressEvent
: BooleanMixed htmlOrData
, [Boolean loadScripts
], [Function callback
] )
:
voidhtmlOrData
: MixedloadScri
:
Ext.BoxComponentSets the current box measurements of the component's underlying element.Sets the current box measurements of the component's underlying element.Parameters:box
: ObjectAn object in the format {x, y, width, height}
Returns:Ext.BoxComponent
this
Boolean
Mixed value
)
+ BooleanBoolean
Mixed The
)
:
- BooleanValidates a value according to the field's validation rules and marks the field as invalid -if the validation fails. Validation rules are processed in the following order:
-A validator offers a way to customize and reuse a validation specification.
-If a field is configured with a validator
-function, it will be passed the current field value. The validator
-function is expected to return either:
-
If the validator
has not halted validation,
-basic validation proceeds as follows:
allowBlank
: (Invalid message =
-emptyText
)allowBlank
, a
-blank field will cause validation to halt at this step and return
-Boolean true or false accordingly.
-minLength
: (Invalid message =
-minLengthText
)minLength
-specified, validation halts.
-maxLength
: (Invalid message =
-maxLengthText
)maxLength
-specified, validation halts.
-If none of the prior validation steps halts validation, a field
-configured with a vtype
will utilize the
-corresponding VTypes validation function.
-If invalid, either the field's vtypeText
or
-the VTypes vtype Text property will be used for the invalid message.
-Keystrokes on the field will be filtered according to the VTypes
-vtype Mask property.
value
: MixedBoolean
Event | Defined By | |
---|---|---|
added :
+ Boolean Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
+with the first ... Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
+with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
+to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
+overridden instead. Parameters:
| Field |
Event | Defined By | |
---|---|---|
added :
( Ext.Component this , Ext.Container ownerCt , number index )
Fires when a component is added to an Ext.Container Fires when a component is added to an Ext.Container Listeners will be called with the following arguments:
| Component | |
afterrender :
( Ext.Component this )
|