Hierarchy
Ext.BaseExt.form.field.FieldMixed into
Files
This mixin provides a common interface for the logical behavior and state of form fields, including:
\n\nNOTE: When implementing custom fields, it is most likely that you will want to extend the Ext.form.field.Base\ncomponent class rather than using this mixin directly, as BaseField contains additional logic for generating an\nactual DOM complete with label and error message display and a form input field,\nplus methods that bind the Field value getters and setters to the input field's value.
\n\nIf you do want to implement this mixin directly and don't want to extend Ext.form.field.Base, then\nyou will most likely want to override the following methods with custom implementations: getValue,\nsetValue, and getErrors. Other methods may be overridden as needed but their base\nimplementations should be sufficient for common cases. You will also need to make sure that initField\nis called during the component's initialization.
\nTrue to disable the field. Disabled Fields will not be submitted.
\nDefaults to: false
Overrides: Ext.AbstractComponent.disabled
The name of the field. By default this is used as the parameter name when including the\nfield value in a form submit(). To prevent the field from\nbeing included in the form submit, set submitValue to false.
\nSetting this to false will prevent the field from being submitted even when it is\nnot disabled.
\nDefaults to: true
Specifies whether this field should be validated immediately whenever a change in its value is detected.\nIf the validation results in a change in the field's validity, a validitychange event will be\nfired. This allows the field to show feedback about the validity of its contents immediately as the user is\ntyping.
\n\nWhen set to false, feedback will not be immediate. However the form will still be validated before submitting if\nthe clientValidation option to Ext.form.Basic.doAction is enabled, or if the field or form are validated\nmanually.
\n\nSee also Ext.form.field.Base.checkChangeEvents for controlling how changes to the field's value are\ndetected.
\nDefaults to: true
Flag denoting that this component is a Field. Always true.
\nDefaults to: true
The original value of the field as configured in the value configuration, or as loaded by the last\nform load operation if the form's trackResetOnLoad setting is true.
Get the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); // dependent on 'this'\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nA utility for grouping a set of modifications which may trigger value changes into a single transaction, to\nprevent excessive firing of change events. This is useful for instance if the field has sub-fields which\nare being updated as a group; you don't want the container field to check its own changed state for each subfield\nchange.
\nA function containing the transaction code
\nTemplate method before a field is reset.
\nCall the original method that was previously overridden with override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nThis method has been deprecated
\nas of 4.1. Use callParent instead.
\n\nThe arguments, either an array or the arguments object\nfrom the current method, for example: this.callOverridden(arguments)
Returns the result of calling the overridden method
\nCall the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see Ext.define).
\n\n Ext.define('My.Base', {\n constructor: function (x) {\n this.x = x;\n },\n\n statics: {\n method: function (x) {\n return x;\n }\n }\n });\n\n Ext.define('My.Derived', {\n extend: 'My.Base',\n\n constructor: function () {\n this.callParent([21]);\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // alerts 21\nThis can be used with an override as follows:
\n\n Ext.define('My.DerivedOverride', {\n override: 'My.Derived',\n\n constructor: function (x) {\n this.callParent([x*2]); // calls original My.Derived constructor\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // now alerts 42\nThis also works with static methods.
\n\n Ext.define('My.Derived2', {\n extend: 'My.Base',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Base.method\n }\n }\n });\n\n alert(My.Base.method(10); // alerts 10\n alert(My.Derived2.method(10); // alerts 20\nLastly, it also works with overridden static methods.
\n\n Ext.define('My.Derived2Override', {\n override: 'My.Derived2',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Derived2.method\n }\n }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\nTo override a method and replace it and also call the superclass method, use\ncallSuper. This is often done to patch a method to fix a bug.
\nThe arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)
Returns the result of calling the parent method
\nThis method is used by an override to call the superclass method but bypass any\noverridden method. This is often done to \"patch\" a method that contains a bug\nbut for whatever reason cannot be fixed directly.
\n\nConsider:
\n\n Ext.define('Ext.some.Class', {\n method: function () {\n console.log('Good');\n }\n });\n\n Ext.define('Ext.some.DerivedClass', {\n method: function () {\n console.log('Bad');\n\n // ... logic but with a bug ...\n\n this.callParent();\n }\n });\nTo patch the bug in DerivedClass.method, the typical solution is to create an\noverride:
Ext.define('App.paches.DerivedClass', {\n override: 'Ext.some.DerivedClass',\n\n method: function () {\n console.log('Fixed');\n\n // ... logic but with bug fixed ...\n\n this.callSuper();\n }\n });\nThe patch method cannot use callParent to call the superclass method since\nthat would call the overridden method containing the bug. In other words, the\nabove patch would only produce \"Fixed\" then \"Good\" in the console log, whereas,\nusing callParent would produce \"Fixed\" then \"Bad\" then \"Good\".
The arguments, either an array or the arguments object\nfrom the current method, for example: this.callSuper(arguments)
Returns the result of calling the superclass method
\nChecks whether the value of the field has changed since the last time it was checked.\nIf the value has changed, it:
\n\nChecks the isDirty state of the field and if it has changed since the last time it was checked,\nfires the dirtychange event.
\nClear any invalid styles/messages for this field. Components using this mixin should implement this method to\nupdate the components rendering to clear any existing messages.
\n\nNote: this method does not cause the Field's validate or isValid methods to return true\nif the value does not pass validation. So simply clearing a field's errors will not necessarily allow\nsubmission of forms submitted with the Ext.form.action.Submit.clientValidation option set.
Only relevant if the instance's isFileUpload method returns true. Returns a reference to the file input\nDOM element holding the user's selected file. The input will be appended into the submission form and will not be\nreturned, so this method should also create a replacement.
\nRuns this field's validators and returns an array of error messages for any validation failures. This is called\ninternally during validation and would not usually need to be used manually.
\n\nEach subclass should override or augment the return value to provide their own errors.
\nThe value to get errors for (defaults to the current field value)
\nAll error messages for this field; an empty Array if none.
\nReturns the value(s) that should be saved to the Ext.data.Model instance for this field, when Ext.form.Basic.updateRecord is called. Typically this will be an object with a single name-value pair, the name\nbeing this field's name and the value being its current data value. More advanced field\nimplementations may return more than one name-value pair. The returned values will be saved to the corresponding\nfield names in the Model.
\n\nNote that the values returned from this method are not guaranteed to have been successfully validated.
\nA mapping of submit parameter names to values; each value should be a string, or an array of\nstrings if that particular name has multiple values. It can also return null if there are no parameters to be\nsubmitted.
\nReturns the name attribute of the field. This is used as the parameter name\nwhen including the field value in a form submit().
\nReturns the parameter(s) that would be included in a standard form submit for this field. Typically this will be\nan object with a single name-value pair, the name being this field's name and the value being\nits current stringified value. More advanced field implementations may return more than one name-value pair.
\n\nNote that the values returned from this method are not guaranteed to have been successfully validated.
\nA mapping of submit parameter names to values; each value should be a string, or an array of\nstrings if that particular name has multiple values. It can also return null if there are no parameters to be\nsubmitted.
\nReturns the current data value of the field. The type of value returned is particular to the type of the\nparticular field (e.g. a Date object for Ext.form.field.Date).
\nvalue The field value
\nInitialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\nthis
\nInitializes this Field mixin on the current instance. Components using this mixin should call this method during\ntheir own initialization process.
\nInitializes the field's value based on the initial config.
\nReturns true if the value of this Field has been changed from its originalValue.\nWill always return false if the field is disabled.
\n\nNote that if the owning form was configured with\ntrackResetOnLoad then the originalValue is updated when\nthe values are loaded by Ext.form.Basic.setValues.
\nTrue if this field has been changed from its original value (and is not disabled),\nfalse otherwise.
\nReturns whether this Field is a file upload field; if it returns true, forms will use special techniques for\nsubmitting the form via AJAX. See Ext.form.Basic.hasUpload for details. If\nthis returns true, the extractFileInput method must also be implemented to return the corresponding file\ninput element.
\nReturns whether or not the field value is currently valid by validating the field's current\nvalue. The validitychange event will not be fired; use validate instead if you want the event\nto fire. Note: disabled fields are always treated as valid.
\n\nImplementations are encouraged to ensure that this method does not have side-effects such as triggering error\nmessage display.
\nTrue if the value is valid, else false
\nAssociate one or more error messages with this field. Components using this mixin should implement this method to\nupdate the component's rendering to display the messages.
\n\nNote: this method does not cause the Field's validate or isValid methods to return false\nif the value does pass validation. So simply marking a Field as invalid will not prevent submission of forms\nsubmitted with the Ext.form.action.Submit.clientValidation option set.
Called when the field's value changes. Performs validation if the validateOnChange\nconfig is enabled, and invokes the dirty check.
\nResets the current field value to the originally loaded value and clears any validation messages. See Ext.form.Basic.trackResetOnLoad
\nResets the field's originalValue property so it matches the current value. This is\ncalled by Ext.form.Basic.setValues if the form's\ntrackResetOnLoad property is set to true.
\nSets a data value into the field and runs the change detection and validation.
\nThe value to set
\nthis
\nGet the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics() is scope-independent and it always returns the class from which it was called, regardless of what\nthis points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\nReturns whether or not the field value is currently valid by validating the field's current\nvalue, and fires the validitychange event if the field's validity has changed since the last validation.\nNote: disabled fields are always treated as valid.
\n\nCustom implementations of this method are allowed to have side-effects such as triggering error message display.\nTo validate without side-effects, use isValid.
\nTrue if the value is valid, else false
\nAdd methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.addMembers({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\nAdd / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\nthis
\nBorrow another class' members to the prototype of this class.
\n\nExt.define('Bank', {\n money: '$$$',\n printMoney: function() {\n alert('$$$$$$$');\n }\n});\n\nExt.define('Thief', {\n ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\nThe class to borrow members from
\nThe names of the members to borrow
\nthis
\nCreate a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\nAll parameters are passed to the constructor of the class.
\nthe created instance.
\nCreate aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\nThe new method name, or an object to set multiple aliases. See\nflexSetter
\nThe original method name
\nGet the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\nclassName
\nAdds members to class.
\nThis method has been deprecated since 4.1
\nUse addMembers instead.
\n\nOverride members of this class. Overridden methods can be invoked via\ncallParent.
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nAs of 4.1, direct use of this method is deprecated. Use Ext.define\ninstead:
\n\nExt.define('My.CatOverride', {\n override: 'My.Cat',\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\nThe above accomplishes the same result but can be managed by the Ext.Loader\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).
\nThis method has been deprecated since 4.1.0
\nUse Ext.define instead
\n\nThe properties to add to this class. This should be\nspecified as an object literal containing one or more properties.
\nthis class
\nFires when the value of a field is changed via the setValue method.
\nThe new value
\nThe original value
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\nFires when a change in the field's isDirty state is detected.
\nWhether or not the field is now dirty
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\nFires when a change in the field's validity is detected.
\nWhether or not the field is now valid
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\n