Alternate names
Ext.form.BasicFormHierarchy
Ext.BaseExt.util.ObservableExt.form.BasicRequires
Files
Provides input field management, validation, submission, and form loading services for the collection\nof Field instances within a Ext.container.Container. It is recommended\nthat you use a Ext.form.Panel as the form container, as that has logic to automatically\nhook up an instance of Ext.form.Basic (plus other conveniences related to field configuration.)
\n\nThe Basic class delegates the handling of form loads and submits to instances of Ext.form.action.Action.\nSee the various Action implementations for specific details of each one's functionality, as well as the\ndocumentation for doAction which details the configuration options that can be specified in\neach action call.
\n\nThe default submit Action is Ext.form.action.Submit, which uses an Ajax request to submit the\nform's values to a configured URL. To enable normal browser submission of an Ext form, use the\nstandardSubmit config option.
\n\nFile uploads are not performed using normal 'Ajax' techniques; see the description for\nhasUpload for details. If you're using file uploads you should read the method description.
\n\nExt.create('Ext.form.Panel', {\n title: 'Basic Form',\n renderTo: Ext.getBody(),\n bodyPadding: 5,\n width: 350,\n\n // Any configuration items here will be automatically passed along to\n // the Ext.form.Basic instance when it gets created.\n\n // The form will submit an AJAX request to this URL when submitted\n url: 'save-form.php',\n\n items: [{\n xtype: 'textfield',\n fieldLabel: 'Field',\n name: 'theField'\n }],\n\n buttons: [{\n text: 'Submit',\n handler: function() {\n // The getForm() method returns the Ext.form.Basic instance:\n var form = this.up('form').getForm();\n if (form.isValid()) {\n // Submit the Ajax request and handle the response\n form.submit({\n success: function(form, action) {\n Ext.Msg.alert('Success', action.result.message);\n },\n failure: function(form, action) {\n Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');\n }\n });\n }\n }\n }]\n});\nIf specified, load and submit actions will be handled with DirectLoad\nand DirectSubmit. Methods which have been imported by\nExt.direct.Manager can be specified here to load and submit forms. API methods may also be\nspecified as strings. See Ext.data.proxy.Direct.directFn. Such as the following:
\n\napi: {\n load: App.ss.MyProfile.load,\n submit: App.ss.MyProfile.submit\n}\nLoad actions can use paramOrder or paramsAsHash to customize how the load method\nis invoked. Submit actions will always use a standard form submit. The formHandler configuration\n(see Ext.direct.RemotingProvider#action) must be set on the associated server-side method which has\nbeen imported by Ext.direct.Manager.
Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
Parameters are encoded as standard HTTP parameters using Ext.Object.toQueryString.
\nAn Ext.data.reader.Reader (e.g. Ext.data.reader.Xml) instance or\nconfiguration to be used to read field error messages returned from 'submit' actions.\nThis is optional as there is built-in support for processing JSON responses.
\n\nThe Records which provide messages for the invalid Fields must use the\nField name (or id) as the Record ID, and must contain a field called 'msg'\nwhich contains the error message.
\n\nThe errorReader does not have to be a full-blown implementation of a\nReader. It simply needs to implement a read(xhr) function\nwhich returns an Array of Records in an object with the following\nstructure:
{\n records: recordArray\n}\nIf set to true, the field values are sent as JSON in the request body.\nAll of the field values, plus any additional params configured via baseParams\nand/or the options to submit, will be included in the values POSTed in the body of the request.
A config object containing one or more event handlers to be added to this object during initialization. This\nshould be a valid listeners config object as specified in the addListener example for attaching multiple\nhandlers at once.
\n\nDOM events from Ext JS Components
\n\nWhile some Ext JS Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this is usually\nonly done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a\nchild element of a Component, we need to specify the element option to identify the Component property to add a\nDOM listener to:
new Ext.panel.Panel({\n width: 400,\n height: 200,\n dockedItems: [{\n xtype: 'toolbar'\n }],\n listeners: {\n click: {\n element: 'el', //bind to the underlying el property on the panel\n fn: function(){ console.log('click el'); }\n },\n dblclick: {\n element: 'body', //bind to the underlying body property on the panel\n fn: function(){ console.log('dblclick body'); }\n }\n }\n});\nThe request method to use (GET or POST) for form actions if one isn't supplied in the action options.
\nThe request method to use (GET or POST) for form actions if one isn't supplied in the action options.
\nA list of params to be executed server side. Only used for the api load\nconfiguration.
Specify the params in the order in which they must be executed on the\nserver-side as either (1) an Array of String values, or (2) a String of params\ndelimited by either whitespace, comma, or pipe. For example,\nany of the following would be acceptable:
\n\nparamOrder: ['param1','param2','param3']\nparamOrder: 'param1 param2 param3'\nparamOrder: 'param1,param2,param3'\nparamOrder: 'param1|param2|param'\nOnly used for the api load configuration. If true, parameters will be sent as a\nsingle hash collection of named arguments. Providing a paramOrder nullifies this\nconfiguration.
Defaults to: false
An Ext.data.reader.Reader (e.g. Ext.data.reader.Xml) instance or\nconfiguration to be used to read data when executing 'load' actions. This\nis optional as there is built-in support for processing JSON responses.
\nIf set to true, a standard HTML form submit is used instead of a XHR (Ajax) style form submission.\nAll of the field values, plus any additional params configured via baseParams\nand/or the options to submit, will be included in the values submitted in the form.
By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific\nelement by passing it or its id or mask the form itself by passing in true.
\nInitial suspended call count. Incremented when suspendEvents is called, decremented when resumeEvents is called.
\nDefaults to: 0
This object holds a key for any event that has a listener. The listener may be set\ndirectly on the instance, or on its class or a super class (via observe) or\non the MVC EventBus. The values of this object are truthy\n(a non-zero number) and falsy (0 or undefined). They do not represent an exact count\nof listeners. The value for an event is truthy if the event must be fired and is\nfalsy if there is no need to fire the event.
\n\nThe intended use of this property is to avoid the expense of fireEvent calls when\nthere are no listeners. This can be particularly helpful when one would otherwise\nhave to call fireEvent hundreds or thousands of times. It is used like this:
\n\n if (this.hasListeners.foo) {\n this.fireEvent('foo', this, arg1);\n }\ntrue in this class to identify an object as an instantiated Observable, or subclass thereof.
Defaults to: true
The container component to which this BasicForm is attached.
\nThe container component to which this BasicForm is attached.
\nGet 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'\nCreates new form.
\nThe component that is the container for the form, usually a Ext.form.Panel
\nConfiguration options. These are normally specified in the config to the\nExt.form.Panel constructor, which passes them along to the BasicForm automatically.
\nAdds the specified events to the list of events which this Observable may fire.
\nEither an object with event names as properties with\na value of true. For example:
this.addEvents({\n storeloaded: true,\n storecleared: true\n});\nOr any number of event names as separate parameters. For example:
\n\nthis.addEvents('storeloaded', 'storecleared');\nAppends an event handler to this object. For example:
\n\nmyGridPanel.on(\"mouseover\", this.onMouseOver, this);\nThe method also allows for a single argument to be passed which is a config object\ncontaining properties which specify multiple events. For example:
\n\nmyGridPanel.on({\n cellClick: this.onCellClick,\n mouseover: this.onMouseOver,\n mouseout: this.onMouseOut,\n scope: this // Important. Ensure \"this\" is correct during handler execution\n});\nOne can also specify options for each event handler separately:
\n\nmyGridPanel.on({\n cellClick: {fn: this.onCellClick, scope: this, single: true},\n mouseover: {fn: panel.onMouseOver, scope: panel}\n});\nNames of methods in a specified scope may also be used. Note that\nscope MUST be specified to use this option:
myGridPanel.on({\n cellClick: {fn: 'onCellClick', scope: this, single: true},\n mouseover: {fn: 'onMouseOver', scope: panel}\n});\nThe name of the event to listen for.\nMay also be an object who's property names are event names.
\n\nThe method the event invokes, or if scope is specified, the name* of the method within\nthe specified scope. Will be called with arguments\ngiven to fireEvent plus the options parameter described below.
The scope (this reference) in which the handler function is\nexecuted. If omitted, defaults to the object which fired the event.
An object containing handler configuration.
\n\n\n\n\nNote: Unlike in ExtJS 3.x, the options object will also be passed as the last\nargument to every event handler.
\n\n\n\n\nThis object may contain any of the following properties:
\n\nThe scope (this reference) in which the handler function is executed. If omitted,\n defaults to the object which fired the event.
The number of milliseconds to delay the invocation of the handler after the event fires.
\n\nTrue to add a handler to handle just the next firing of the event, and then remove itself.
\n\nCauses the handler to be scheduled to run in an Ext.util.DelayedTask delayed\n by the specified number of milliseconds. If the event fires again within that time,\n the original handler is not invoked, but the new handler is scheduled in its place.
\n\nOnly call the handler if the event was fired on the target Observable, not if the event\n was bubbled up from a child Observable.
\n\nThis option is only valid for listeners bound to Components.\n The name of a Component property which references an element to add a listener to.
\n\n\n\n\nThis option is useful during Component construction to add DOM event listeners to elements of\n Components which will exist only after the Component is rendered.\n For example, to add a click listener to a Panel's body:
\n\n\n\n\n new Ext.panel.Panel({\n title: 'The title',\n listeners: {\n click: this.handlePanelClick,\n element: 'body'\n }\n });\nWhen specified as true, the function returns A Destroyable object. An object which implements the destroy method which removes all listeners added in this call.
Defaults to: false
An optional numeric priority that determines the order in which event handlers\n are run. Event handlers with no priority will be run as if they had a priority\n of 0. Handlers with a higher priority will be prioritized to run sooner than\n those with a lower priority. Negative numbers can be used to set a priority\n lower than the default. Internally, the framework uses a range of 1000 or\n greater, and -1000 or lesser for handers that are intended to run before or\n after all others, so it is recommended to stay within the range of -999 to 999\n when setting the priority of event handlers in application-level code.
\n\n\n\n\nCombining Options
\n\n\n\n\nUsing the options argument, it is possible to combine different types of listeners:
\n\n\n\n\nA delayed, one-time listener.
\n\n\n\n\nmyPanel.on('hide', this.handleClick, this, {\n single: true,\n delay: 100\n});\nOnly when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:
this.btnListeners = = myButton.on({\n destroyable: true\n mouseover: function() { console.log('mouseover'); },\n mouseout: function() { console.log('mouseout'); },\n click: function() { console.log('click'); }\n});\nAnd when those listeners need to be removed:
\n\n\n\n\nExt.destroy(this.btnListeners);\nor
\n\n\n\n\nthis.btnListeners.destroy();\nAdds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is\ndestroyed.
\nThe item to which to add a listener/listeners.
\n\nThe event name, or an object containing event name properties.
\n\nIf the ename parameter was an event name, this is the handler function.
If the ename parameter was an event name, this is the scope (this reference)\nin which the handler function is executed.
If the ename parameter was an event name, this is the\naddListener options.
Only when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:
this.btnListeners = = myButton.mon({\n destroyable: true\n mouseover: function() { console.log('mouseover'); },\n mouseout: function() { console.log('mouseout'); },\n click: function() { console.log('click'); }\n});\nAnd when those listeners need to be removed:
\n\n\n\n\nExt.destroy(this.btnListeners);\nor
\n\n\n\n\nthis.btnListeners.destroy();\nCalled after an action is performed via doAction.
\nThe Action instance that was invoked
\nTrue if the action completed successfully, false, otherwise.
\nCalls Ext.applyIf for all field in this form with the passed object.
\nThe object to be applied
\nthis
\nCalls Ext.apply for all fields in this form with the passed object.
\nThe object to be applied
\nthis
\nCalled before an action is performed via doAction.
\nThe Action instance that was invoked
\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
\nCheck whether the dirty state of the entire form has changed since it was last checked, and\nif so fire the dirtychange event. This is automatically invoked\nwhen an individual field's dirty state changes.
Check whether the validity of the entire form has changed since it was last checked, and\nif so fire the validitychange event. This is automatically invoked\nwhen an individual field's validity changes.
\nRemoves all listeners for this object including the managed listeners
\nPerforms a predefined action (an implementation of Ext.form.action.Action) to perform application-\nspecific processing.
\nThe name of the predefined action type, or instance of Ext.form.action.Action to perform.
\nThe options to pass to the Ext.form.action.Action that will get created,\nif the action argument is a String.
\n\nAll of the config options listed below are supported by both the submit and\nload actions unless otherwise noted (custom actions could also accept other\nconfig options):
\nThe url for the action (defaults to the form's url.)
\nThe form method to use (defaults to the form's method, or POST if not defined)
\nThe params to pass (defaults to the form's baseParams, or none if not defined)
\n\nParameters are encoded as standard HTTP parameters using Ext.Object.toQueryString.
\nRequest headers to set for the action.
\nThe callback that will be invoked after a successful response (see top of submit\nand load for a description of what constitutes a successful response).
\nThe form that requested the action.
\nThe callback that will be invoked after a failed transaction attempt.
\nThe form that requested the action.
\nThe Action object which performed the operation.\nThe action object contains these properties of interest:
\n\nThe scope in which to call the callback functions (The this reference for the callback functions).
\nSubmit Action only. Determines whether a Form's fields are validated in a final call to isValid prior to submission. Set to false to prevent this. If undefined, pre-submission\nfield validation is performed.
\nthis
\nEnables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if\npresent. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers.\nSee Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the\nComponent's immediate owner. But if a known target is required, this can be overridden to access the\nrequired target more quickly.
\n\nExample:
\n\nExt.define('Ext.overrides.form.field.Base', {\n override: 'Ext.form.field.Base',\n\n // Add functionality to Field's initComponent to enable the change event to bubble\n initComponent: function () {\n this.callParent();\n this.enableBubble('change');\n }\n});\n\nvar myForm = Ext.create('Ext.form.Panel', {\n title: 'User Details',\n items: [{\n ...\n }],\n listeners: {\n change: function() {\n // Title goes red if form has been modified.\n myForm.header.setStyle('color', 'red');\n }\n }\n});\nFind a specific Ext.form.field.Field in this form by id or name.
\nThe value to search for (specify either a id or\nname or hiddenName).
\nThe first matching field, or null if none was found.
Fires the specified event with the passed parameters (minus the event name, plus the options object passed\nto addListener).
An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by\ncalling enableBubble.
\nThe name of the event to fire.
\nVariable number of parameters are passed to handlers.
\nreturns false if any of the handlers return false otherwise it returns true.
\nFires the specified event with the passed parameter list.
\n\nAn event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by\ncalling enableBubble.
\nThe name of the event to fire.
\nAn array of parameters which are passed to handlers.
\nreturns false if any of the handlers return false otherwise it returns true.
\nFinds and returns the set of all items bound to fields inside this form
\nThe set of all bound form field items
\nGets the bubbling parent for an Observable
\nThe bubble parent. null is returned if no bubble target exists
\nRetrieves the fields in the form as a set of key/value pairs, using their\ngetModelData() method to collect the values.\nIf multiple fields return values under the same name those values will be combined into an Array.\nThis is similar to getValues except that this method collects type-specific data values\n(e.g. Date objects for date fields) while getValues returns only String values for submission.
\nIf true, only fields that are dirty will be included in the result.
\nDefaults to: false
Return all the Ext.form.field.Field components in the owner container.
\nCollection of the Field objects
\nReturns the last Ext.data.Model instance that was loaded via loadRecord
\nThe record
\nRetrieves the fields in the form as a set of key/value pairs, using their\ngetSubmitData() method to collect the values.\nIf multiple fields return values under the same name those values will be combined into an Array.\nThis is similar to getFieldValues except that this method\ncollects only String values for submission, while getFieldValues collects type-specific data\nvalues (e.g. Date objects for date fields.)
\nIf true, will return the key/value collection as a single\nURL-encoded param string.
\nDefaults to: false
If true, only fields that are dirty will be included in the result.
\nDefaults to: false
If true, the configured emptyText of empty fields will be used.
\nDefaults to: false
If true, the getModelData\nmethod is used to retrieve values from fields, otherwise the getSubmitData\nmethod is used.
\nDefaults to: false
Returns true if the form contains any invalid fields. No fields will be marked as invalid\nas a result of calling this; to trigger marking of fields use isValid instead.
\nChecks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer\nindicates whether the event needs firing or not.
\nThe name of the event to check for
\ntrue if the event is being listened for or bubbles, else false
Returns true if the form contains a file upload field. This is used to determine the method for submitting the\nform: File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using\nXMLHttpRequests. Instead a hidden <form> element containing all the fields is created temporarily and submitted\nwith its target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document\nbut removed after the return data has been gathered.
The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON\nto send the return object, then the Content-Type header must be set to \"text/html\" in order to tell the\nbrowser to insert the text unchanged into the document body.
\n\nCharacters which are significant to an HTML parser must be sent as HTML entities, so encode \"<\" as \"<\",\n\"&\" as \"&\" etc.
The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a\nresponseText property in order to conform to the requirements of event handlers and callbacks.
\n\nBe aware that file upload packets are sent with the content type multipart/form and some server technologies\n(notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from\nthe packet content.
\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
\nReturns true if any fields in this form have changed from their original values.
Note that if this BasicForm was configured with trackResetOnLoad then the Fields' original values are updated when the values are\nloaded by setValues or loadRecord.
\nReturns true if client-side validation on the form is successful. Any invalid fields will be\nmarked as invalid. If you only want to determine overall form validity without marking anything,\nuse hasInvalidField instead.
\nLoads an Ext.data.Model into this form by calling setValues with the\nrecord data.\nSee also trackResetOnLoad.
\nThe record to load
\nthis
\nMark fields in this form invalid in bulk.
\nEither an array in the form [{id:'fieldId', msg:'The message'}, ...],\nan object hash of {id: msg, id2: msg2}, or a Ext.data.Errors object.
this
\nShorthand for addManagedListener.
\n\nAdds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is\ndestroyed.
\nThe item to which to add a listener/listeners.
\n\nThe event name, or an object containing event name properties.
\n\nIf the ename parameter was an event name, this is the handler function.
If the ename parameter was an event name, this is the scope (this reference)\nin which the handler function is executed.
If the ename parameter was an event name, this is the\naddListener options.
Only when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:
this.btnListeners = = myButton.mon({\n destroyable: true\n mouseover: function() { console.log('mouseover'); },\n mouseout: function() { console.log('mouseout'); },\n click: function() { console.log('click'); }\n});\nAnd when those listeners need to be removed:
\n\n\n\n\nExt.destroy(this.btnListeners);\nor
\n\n\n\n\nthis.btnListeners.destroy();\nShorthand for removeManagedListener.
\n\nRemoves listeners that were added by the mon method.
\nThe item from which to remove a listener/listeners.
\n\nThe event name, or an object containing event name properties.
\n\nIf the ename parameter was an event name, this is the handler function.
If the ename parameter was an event name, this is the scope (this reference)\nin which the handler function is executed.
Shorthand for addListener.
\n\nAppends an event handler to this object. For example:
\n\nmyGridPanel.on(\"mouseover\", this.onMouseOver, this);\nThe method also allows for a single argument to be passed which is a config object\ncontaining properties which specify multiple events. For example:
\n\nmyGridPanel.on({\n cellClick: this.onCellClick,\n mouseover: this.onMouseOver,\n mouseout: this.onMouseOut,\n scope: this // Important. Ensure \"this\" is correct during handler execution\n});\nOne can also specify options for each event handler separately:
\n\nmyGridPanel.on({\n cellClick: {fn: this.onCellClick, scope: this, single: true},\n mouseover: {fn: panel.onMouseOver, scope: panel}\n});\nNames of methods in a specified scope may also be used. Note that\nscope MUST be specified to use this option:
myGridPanel.on({\n cellClick: {fn: 'onCellClick', scope: this, single: true},\n mouseover: {fn: 'onMouseOver', scope: panel}\n});\nThe name of the event to listen for.\nMay also be an object who's property names are event names.
\n\nThe method the event invokes, or if scope is specified, the name* of the method within\nthe specified scope. Will be called with arguments\ngiven to fireEvent plus the options parameter described below.
The scope (this reference) in which the handler function is\nexecuted. If omitted, defaults to the object which fired the event.
An object containing handler configuration.
\n\n\n\n\nNote: Unlike in ExtJS 3.x, the options object will also be passed as the last\nargument to every event handler.
\n\n\n\n\nThis object may contain any of the following properties:
\n\nThe scope (this reference) in which the handler function is executed. If omitted,\n defaults to the object which fired the event.
The number of milliseconds to delay the invocation of the handler after the event fires.
\n\nTrue to add a handler to handle just the next firing of the event, and then remove itself.
\n\nCauses the handler to be scheduled to run in an Ext.util.DelayedTask delayed\n by the specified number of milliseconds. If the event fires again within that time,\n the original handler is not invoked, but the new handler is scheduled in its place.
\n\nOnly call the handler if the event was fired on the target Observable, not if the event\n was bubbled up from a child Observable.
\n\nThis option is only valid for listeners bound to Components.\n The name of a Component property which references an element to add a listener to.
\n\n\n\n\nThis option is useful during Component construction to add DOM event listeners to elements of\n Components which will exist only after the Component is rendered.\n For example, to add a click listener to a Panel's body:
\n\n\n\n\n new Ext.panel.Panel({\n title: 'The title',\n listeners: {\n click: this.handlePanelClick,\n element: 'body'\n }\n });\nWhen specified as true, the function returns A Destroyable object. An object which implements the destroy method which removes all listeners added in this call.
Defaults to: false
An optional numeric priority that determines the order in which event handlers\n are run. Event handlers with no priority will be run as if they had a priority\n of 0. Handlers with a higher priority will be prioritized to run sooner than\n those with a lower priority. Negative numbers can be used to set a priority\n lower than the default. Internally, the framework uses a range of 1000 or\n greater, and -1000 or lesser for handers that are intended to run before or\n after all others, so it is recommended to stay within the range of -999 to 999\n when setting the priority of event handlers in application-level code.
\n\n\n\n\nCombining Options
\n\n\n\n\nUsing the options argument, it is possible to combine different types of listeners:
\n\n\n\n\nA delayed, one-time listener.
\n\n\n\n\nmyPanel.on('hide', this.handleClick, this, {\n single: true,\n delay: 100\n});\nOnly when the destroyable option is specified.
A Destroyable object. An object which implements the destroy method which removes all listeners added in this call. For example:
this.btnListeners = = myButton.on({\n destroyable: true\n mouseover: function() { console.log('mouseover'); },\n mouseout: function() { console.log('mouseout'); },\n click: function() { console.log('click'); }\n});\nAnd when those listeners need to be removed:
\n\n\n\n\nExt.destroy(this.btnListeners);\nor
\n\n\n\n\nthis.btnListeners.destroy();\nHandle changes in the form's validity. If there are any sub components with\nformBind=true then they are enabled/disabled based on the new validity.
Prepares a given class for observable instances. This method is called when a\nclass derives from this class or uses this class as a mixin.
\nThe class constructor to prepare.
\nRelays selected events from the specified Observable as if the events were fired by this.
For example if you are extending Grid, you might decide to forward some events from store.\nSo you can do this inside your initComponent:
\n\nthis.relayEvents(this.getStore(), ['load']);\nThe grid instance will then have an observable 'load' event which will be passed the\nparameters of the store's load event and any function fired with the grid's load event\nwould have access to the grid using the this keyword.
The Observable whose events this object is to relay.
\nArray of event names to relay.
\nA common prefix to prepend to the event names. For example:
\n\nthis.relayEvents(this.getStore(), ['load', 'clear'], 'store');\nNow the grid will forward 'load' and 'clear' events of store as 'storeload' and 'storeclear'.
\nA Destroyable object. An object which implements the destroy method which, when destroyed, removes all relayers. For example:
this.storeRelayers = this.relayEvents(this.getStore(), ['load', 'clear'], 'store');\nCan be undone by calling
\n\nExt.destroy(this.storeRelayers);\nor
\n\nthis.store.relayers.destroy();\nRemoves an event handler.
\nThe type of event the handler was associated with.
\n\nThe handler to remove. This must be a reference to the function passed into the\naddListener call.
\n\nThe scope originally specified for the handler. It must be the same as the\nscope argument specified in the original call to addListener or the listener will not be removed.
\n\nRemoves listeners that were added by the mon method.
\nThe item from which to remove a listener/listeners.
\n\nThe event name, or an object containing event name properties.
\n\nIf the ename parameter was an event name, this is the handler function.
If the ename parameter was an event name, this is the scope (this reference)\nin which the handler function is executed.
Resets all fields in this form. By default, any record bound by loadRecord\nwill be retained.
\nTrue to unbind any record set\nby loadRecord
\nDefaults to: false
this
\nResumes firing of the named event(s).
\n\nAfter calling this method to resume events, the events will fire when requested to fire.
\n\nNote that if the suspendEvent method is called multiple times for a certain event,\nthis converse method will have to be called the same number of times for it to resume firing.
\nMultiple event names to resume.
\nResumes firing events (see suspendEvents).
\n\nIf events were suspended using the queueSuspended parameter, then all events fired\nduring event suspension will be sent to any listeners now.
Set values for fields in this form in bulk.
\nEither an array in the form:
\n\n[{id:'clientName', value:'Fred. Olsen Lines'},\n {id:'portOfLoading', value:'FXT'},\n {id:'portOfDischarge', value:'OSL'} ]\nor an object hash of the form:
\n\n{\n clientName: 'Fred. Olsen Lines',\n portOfLoading: 'FXT',\n portOfDischarge: 'OSL'\n}\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\nShortcut to do a submit action. This will use the\nAJAX submit action by default. If the standardSubmit config\nis enabled it will use a standard form element to submit, or if the api config is present\nit will use the Ext.direct.Direct submit action.
\n\nThe following code:
\n\nmyFormPanel.getForm().submit({\n clientValidation: true,\n url: 'updateConsignment.php',\n params: {\n newStatus: 'delivered'\n },\n success: function(form, action) {\n Ext.Msg.alert('Success', action.result.msg);\n },\n failure: function(form, action) {\n switch (action.failureType) {\n case Ext.form.action.Action.CLIENT_INVALID:\n Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');\n break;\n case Ext.form.action.Action.CONNECT_FAILURE:\n Ext.Msg.alert('Failure', 'Ajax communication failed');\n break;\n case Ext.form.action.Action.SERVER_INVALID:\n Ext.Msg.alert('Failure', action.result.msg);\n }\n }\n});\nwould process the following server response for a successful submission:
\n\n{\n \"success\":true, // note this is Boolean, not string\n \"msg\":\"Consignment updated\"\n}\nand the following server response for a failed submission:
\n\n{\n \"success\":false, // note this is Boolean, not string\n \"msg\":\"You do not have permission to perform this operation\"\n}\nthis
\nSuspends firing of the named event(s).
\n\nAfter calling this method to suspend events, the events will no longer fire when requested to fire.
\n\nNote that if this is called multiple times for a certain event, the converse method\nresumeEvent will have to be called the same number of times for it to resume firing.
\nMultiple event names to suspend.
\nSuspends the firing of all events. (see resumeEvents)
\nPass as true to queue up suspended events to be fired\nafter the resumeEvents call instead of discarding all suspended events.
\nShorthand for removeListener.
\n\nRemoves an event handler.
\nThe type of event the handler was associated with.
\n\nThe handler to remove. This must be a reference to the function passed into the\naddListener call.
\n\nThe scope originally specified for the handler. It must be the same as the\nscope argument specified in the original call to addListener or the listener will not be removed.
\n\nPersists the values in this form into the passed Ext.data.Model object in a beginEdit/endEdit block.\nIf the record is not specified, it will attempt to update (if it exists) the record provided to loadRecord.
\nThe record to edit
\nthis
\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 an action is completed.
\nThe Ext.form.action.Action that completed
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\nFires when an action fails.
\nThe Ext.form.action.Action that failed
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\nFires before any action is performed. Return false to cancel the action.
\nThe Ext.form.action.Action to be performed
\nThe options object passed to Ext.util.Observable.addListener.
\n\n\n\nFires when the dirty state of the entire form changes.
\ntrue if the form is now dirty, false if it is no longer dirty.
The options object passed to Ext.util.Observable.addListener.
\n\n\n\nFires when the validity of the entire form changes.
\ntrue if the form is now valid, false if it is now invalid.
The options object passed to Ext.util.Observable.addListener.
\n\n\n\n