|
| allowBlank : Boolean Specify false to validate that the value's length is > 0 (defaults to
true) | TextField |
| allowDecimals : Boolean False to disallow decimal values (defaults to true) | NumberField |
| allowDomMove : Boolean Whether the component can move the Dom node when rendering (defaults to true). | Component |
| allowNegative : Boolean False to prevent entering a negative sign (defaults to true) | NumberField |
| anchor : StringNote: this config is only used when this Component is rendered
by a Container which has been configured to use an Anc... Note: this config is only used when this Component is rendered
by a Container which has been configured to use an AnchorLayout (or subclass thereof).
@@ -24,11 +29,102 @@ 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 DomHelper element spec, or true for a default
element spec. Used to create the Element which will encapsulate this Component.
See autoEl for details. Defaults to:
- {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
| Field |
| autoScroll : Booleantrue to use overflow:'auto' on the components layout element and show scroll bars automatically when
+ {tag: 'input', type: 'text', size: '20', autocomplete: 'off'}
| Field |
| autoEl : MixedA tag name or DomHelper spec used to create the Element which will
+encapsulate this Component.
+You do not normally ne... 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'
+ }
+}
| Component |
| autoHeight : BooleanTrue to use height:'auto', false to use fixed height (or allow it to be managed by its parent
+Container's layout mana... 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();
| BoxComponent |
| autoScroll : Booleantrue to use overflow:'auto' on the components layout element and show scroll bars automatically when
necessary, false... 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 ).
| BoxComponent |
| autoShow : BooleanTrue if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
them on render... True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove
-them on render (defaults to false). | Component |
| baseChars : String The base set of characters to evaluate as valid numbers (defaults to '0123456789'). | NumberField |
| blankText : StringThe error text to display if the allowBlank validation
+them on render (defaults to false). | Component |
| autoStripChars : Boolean True to automatically strip not allowed characters from the field. Defaults to false | NumberField |
| autoWidth : BooleanTrue to use width:'auto', false to use fixed width (or allow it to be managed by its parent
+Container's layout manage... 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'
+ }],
+});
| BoxComponent |
| baseChars : String The base set of characters to evaluate as valid numbers (defaults to '0123456789'). | NumberField |
| blankText : StringThe error text to display if the allowBlank validation
fails (defaults to 'This field is required') | TextField |
| boxMaxHeight : NumberThe maximum value in pixels which this BoxComponent will set its height to.
Warning: This will override any size mana... The maximum value in pixels which this BoxComponent will set its height to.
Warning: This will override any size management applied by layout managers. | BoxComponent |
| boxMaxWidth : NumberThe maximum value in pixels which this BoxComponent will set its width to.
@@ -37,7 +133,10 @@ Warning: This will override any size manag... 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. | BoxComponent |
| boxMinWidth : NumberThe minimum value in pixels which this BoxComponent will set its width to.
Warning: This will override any size manag... The minimum value in pixels which this BoxComponent will set its width to.
- Warning: This will override any size management applied by layout managers. | BoxComponent |
| clearCls : StringThe CSS class used to to apply to the special clearing div rendered
+ Warning: This will override any size management applied by layout managers. | BoxComponent |
| bubbleEvents : ArrayAn array of events that, when fired, should be bubbled to any parent container.
+See Ext.util.Observable.enableBubble.... | Component |
| clearCls : StringThe CSS class used to to apply to the special clearing div rendered
directly after each form field wrapper to provide... 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').
@@ -346,9 +445,9 @@ validation fails (defaults to 'The maximum length for this field is {maxL...'The maximum length for this field is {maxLength}') | TextField |
| maxText : StringError text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxVal... Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}") | NumberField |
| maxValue : Number The maximum allowed value (defaults to Number.MAX_VALUE) | NumberField |
| minLength : Number Minimum input field length required (defaults to 0) | TextField |
| minLengthText : StringError text to display if the minimum length
validation fails (defaults to 'The minimum length for this field is {minL... Error text to display if the minimum length
validation fails (defaults to 'The minimum length for this field is {minLength}') | TextField |
| minText : StringError text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minVal... Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}") | NumberField |
| minValue : Number The minimum allowed value (defaults to Number.NEGATIVE_INFINITY) | NumberField |
| msgFx : String Experimental The effect used when displaying a validation message under the field
-(defaults to 'normal'). | Field |
| msgTarget<p>The : Stringlocation where the message text set through markInvalid should display.
+(defaults to 'normal'). | Field |
| msgTarget : StringThe location where the message text set through markInvalid should display.
Must be one of the following values:
-<div cla... location where the message text set through markInvalid should display.
+<div... 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.
@@ -357,7 +456,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.
- | Field |
| name : StringThe field's HTML name attribute (defaults to '').
+ | Field |
| name : StringThe field's HTML name attribute (defaults to '').
Note: this property must be set if this field is to be automaticall... The field's HTML name attribute (defaults to '').
Note: this property must be set if this field is to be automatically included with
form submit(). | Field |
| nanText : StringError text to display if the value is not a valid number. For example, this can happen
@@ -647,7 +746,12 @@ Or a shorthand syntax:
:
void Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
This only ta... 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. | TextField |
| clearInvalid()
+This only takes effect if grow = true, and fires the autosize event. | TextField |
| bubble( Function fn , [Object scope ], [Array args ] )
+ :
+ Ext.ComponentBubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of... Bubbles up the component/container heirarchy, calling the specified function with each component. The scope ( this) of
+function call will be the scope provided or the current component. The arguments to the function
+will be the args provided or the current component. If the function returns false at any point,
+the bubble is stopped. | Component |
| clearInvalid()
:
voidClear any invalid styles/messages for this field Clear any invalid styles/messages for this field | Field |
| cloneConfig( Object overrides )
:
@@ -664,45 +768,47 @@ should usually not need to be called directly.Enable this component and fire the 'enable' event. Enable this component and fire the 'enable' event. | Component |
| enableBubble( String/Array events )
:
- 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');
- }
- }
+ 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');
+ }
+ }
});
| Observable |
| findParentBy( Function fn )
:
Ext.ContainerFind a container above this component at any level by a custom function. If the passed function returns
true, the con... Find a container above this component at any level by a custom function. If the passed function returns
-true, the container will be returned. | Component |
| findParentByType( String/Class xtype )
+true, the container will be returned. | Component |
| findParentByType( String/Ext.Component/Class xtype , [Boolean shallow ] )
:
- Ext.ContainerFind a container above this component at any level by xtype or class Find a container above this component at any level by xtype or class | Component |
| fireEvent( String eventName , Object... args )
+ Ext.ContainerFind a container above this component at any level by xtype or class Find a container above this component at any level by xtype or class Parameters:xtype : String/Ext.Component/ClassThe xtype to check for this Component. Note that the the component can either be an instance
+or a component class: shallow : Boolean(optional) False to check whether this Component is descended from the xtype (this is
+the default), or true to check whether this Component is directly of the specified xtype. Returns: | Component |
| fireEvent( String eventName , Object... args )
:
BooleanFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Obse... Fires the specified event with the passed parameters (minus the event name).
@@ -733,7 +839,13 @@ or use a render listener directly: new Ext.Panel({
},
single: true // Remove the listener after first invocation
}
-});
| Component |
| getHeight()
+}); | Component |
| getErrors( Mixed value )
+ :
+ ArrayRuns all of NumberFields validations and returns an array of any errors. Note that this first
+runs TextField's valida... Runs all of NumberFields validations and returns an array of any errors. Note that this first
+runs TextField's validations, so the returned array is an amalgamation of all field errors.
+The additional validations run test that the value is a number, and that it is within the
+configured min and max values. | NumberField |
| getHeight()
:
NumberGets the current height of the component's underlying element. Gets the current height of the component's underlying element. | BoxComponent |
| getId()
:
@@ -811,7 +923,7 @@ of the field. Note: disab... | Field |
| isVisible()
:
- BooleanReturns true if this component is visible. Returns true if this component is visible. | Component |
| isXType( String xtype , [Boolean shallow ] )
+ BooleanReturns true if this component is visible. Returns true if this component is visible. | Component |
| isXType( 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
from th... Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
@@ -823,7 +935,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
| Component |
| markInvalid( [String msg ] )
:
voidDisplay an error message associated with this field, using msgTarget to determine how to
@@ -909,14 +1025,19 @@ event... | Observable |
| selectText( [Number start ], [Number end ] )
:
- voidSelects text in this field Selects text in this field | TextField |
| setAutoScroll( Boolean scroll )
+ voidSelects text in this field Selects text in this field | TextField |
| setActiveError( String msg , Boolean suppressEvent )
+ :
+ voidSets the current activeError to the given string. Fires the 'invalid' event.
+This does not set up the error icon, onl... Sets the current activeError to the given string. Fires the 'invalid' event.
+This does not set up the error icon, only sets the message and fires the event. To show the error icon,
+use markInvalid instead, which calls this method internally | Field |
| setAutoScroll( Boolean scroll )
:
Ext.BoxComponentSets the overflow on the content element of the component. Sets the overflow on the content element of the component. | BoxComponent |
| setDisabled( Boolean disabled )
:
- Ext.ComponentConvenience function for setting disabled/enabled by boolean. Convenience function for setting disabled/enabled by boolean. | Component |
| setHeight( Number height )
+ Ext.ComponentConvenience function for setting disabled/enabled by boolean. Convenience function for setting disabled/enabled by boolean. | Component |
| setHeight( Mixed height )
:
- Ext.BoxComponentSets the height of the component. This method fires the resize event. Sets the height of the component. This method fires the resize event. Parameters:height : NumberThe new height to set. This may be one of:
| BoxComponent |
| setMaxValue( Number value )
@@ -953,10 +1074,10 @@ This may be one of: | Field |
| setVisible( Boolean visible )
:
- Ext.ComponentConvenience function to hide or show this component by boolean. Convenience function to hide or show this component by boolean. | Component |
| setWidth( Number width )
+ Ext.ComponentConvenience function to hide or show this component by boolean. Convenience function to hide or show this component by boolean. | Component |
| setWidth( Mixed width )
:
- Ext.BoxComponentSets the width of the component. This method fires the resize event. Sets the width of the component. This method fires the resize event. Parameters:width : NumberThe new width to setThis may be one of:
| BoxComponent |
| show()
:
@@ -970,7 +1091,11 @@ after the Force the component's size to recalculate based on the underlying element's current height and width. Force the component's size to recalculate based on the underlying element's current height and width. | BoxComponent |
| un( String eventName , Function handler , [Object scope ] )
:
- voidRemoves an event handler (shorthand for removeListener.) | Observable |
| update( Mixed htmlOrData , [Boolean loadScripts ], [Function callback ] )
+ voidRemoves an event handler (shorthand for removeListener.) | Observable |
| unsetActiveError( Boolean suppressEvent )
+ :
+ voidClears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
+usually n... Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
+usually need to be called manually | Field |
| update( Mixed htmlOrData , [Boolean loadScripts ], [Function callback ] )
:
voidUpdate the content area of a component. Update the content area of a component. Parameters:htmlOrData : MixedIf this component has been configured with a template via the tpl config
then it will use this argument as data to populate the template.
@@ -979,63 +1104,13 @@ content area will be updated via Ext.Element update loadScri
:
Ext.BoxComponentSets the current box measurements of the component's underlying element. Sets the current box measurements of the component's underlying element.
| BoxComponent |
| validate()
:
- BooleanValidates the field value Validates the field value | Field |
| validateValue( Mixed value )
+ BooleanValidates the field value Validates the field value | Field |
| validateValue( Mixed The )
:
- BooleanValidates a value according to the field's validation rules and marks the field as invalid
-if the validation fails. V... Validates 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:
-
-- 1. Field specific validator
-
- 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:
-
-- Boolean true if the value is valid (validation continues).
-- a String to represent the invalid message if invalid (validation halts).
-
-
-- 2. Basic Validation
-
- If the validator has not halted validation,
-basic validation proceeds as follows:
-
-allowBlank : (Invalid message =
-emptyText )
-Depending on the configuration of allowBlank , a
-blank field will cause validation to halt at this step and return
-Boolean true or false accordingly.
-
-minLength : (Invalid message =
-minLengthText )
-If the passed value does not satisfy the minLength
-specified, validation halts.
-
-maxLength : (Invalid message =
-maxLengthText )
-If the passed value does not satisfy the maxLength
-specified, validation halts.
-
-
-
-- 3. Preconfigured Validation Types (VTypes)
-
- 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.
-
-- 4. Field specific regex test
-
- If none of the prior validation steps halts validation, a field's
-configured regex test will be processed.
-The invalid message for this test is configured with
-regexText .
- Parameters:value : MixedThe value to validate Returns: | TextField |