Hierarchy
Ext.util.ObservableExt.data.ConnectionExt.Ajax
Files
Connection.js

The global Ajax request class that provides a simple way to make Ajax requests\nwith maximum flexibility.

\n\n\n

Since Ext.Ajax is a singleton, you can set common properties/events for it once\nand override them at the request function level only if necessary.

\n\n\n

Common Properties you may want to set are:

method
extraParams
url

// Default headers to pass in every request\nExt.Ajax.defaultHeaders = {\n    'Powered-By': 'Ext'\n};\n

\n\n\n

Common Events you may want to set are:

beforerequest
requestcomplete
requestexception

// Example: show a spinner during all Ajax requests\nExt.Ajax.on('beforerequest', this.showSpinner, this);\nExt.Ajax.on('requestcomplete', this.hideSpinner, this);\nExt.Ajax.on('requestexception', this.hideSpinner, this);\n

\n\n\n

An example request:

\n\n\n

// Basic request\nExt.Ajax.request({\n   url: 'foo.php',\n   success: someFn,\n   failure: otherFn,\n   headers: {\n       'my-header': 'foo'\n   },\n   params: { foo: 'bar' }\n});\n\n// Simple ajax form submission\nExt.Ajax.request({\n    form: 'some-form',\n    params: 'foo=bar'\n});\n

\n\n\n

Defined By

Config options

Ext.util.Observable
view source

listeners : Object

(optional) A config object containing one or more event handlers to be added to this\nobject during initialization. ...

(optional)

A config object containing one or more event handlers to be added to this\nobject during initialization. This should be a valid listeners config object as specified in the\naddListener example for attaching multiple handlers at once.

\n\n

DOM events from ExtJs Components

\n\n\n

While some ExtJs Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this\n\n\n

is usually only done when extra value can be added. For example the DataView's\nclick event passing the node clicked on. To access DOM\nevents directly from a Component's HTMLElement, listeners must be added to the Element after the Component\nhas been rendered. A plugin can simplify this step:

\n\n

// Plugin is configured with a listeners config object.\n// The Component is appended to the argument list of all handler functions.\nExt.DomObserver = Ext.extend(Object, {\n    constructor: function(config) {\n        this.listeners = config.listeners ? config.listeners : config;\n    },\n\n    // Component passes itself into plugin's init method\n    init: function(c) {\n        var p, l = this.listeners;\n        for (p in l) {\n            if (Ext.isFunction(l[p])) {\n                l[p] = this.createHandler(l[p], c);\n            } else {\n                l[p].fn = this.createHandler(l[p].fn, c);\n            }\n        }\n\n        // Add the listeners to the Element immediately following the render call\n        c.render = c.render.createSequence(function() {\n            var e = c.getEl();\n            if (e) {\n                e.on(l);\n            }\n        });\n    },\n\n    createHandler: function(fn, c) {\n        return function(e) {\n            fn.call(this, e, c);\n        };\n    }\n});\n\nvar combo = new Ext.form.ComboBox({\n\n    // Collapse combo when its element is clicked on\n    plugins: [ new Ext.DomObserver({\n        click: function(evt, comp) {\n            comp.collapse();\n        }\n    })],\n    store: myStore,\n    typeAhead: true,\n    mode: 'local',\n    triggerAction: 'all'\n});\n

\n\n\n

Defined By

Properties

Ext.Ajax
view source

autoAbort : Boolean

Whether a new request should abort any pending requests. ...

Whether a new request should abort any pending requests. (defaults to false)

Defaults to: false

Overrides: Ext.data.Connection.autoAbort

Ext.Ajax
view source

defaultHeaders : Object

An object containing request headers which are added to each request made by this object\n(defaults to undefined).

Ext.Ajax
view source

disableCaching : Boolean

True to add a unique cache-buster param to GET requests. ...

True to add a unique cache-buster param to GET requests. (defaults to true)

Overrides: Ext.data.Connection.disableCaching

Ext.data.Connection
view source

disableCachingParam : String

(Optional) Change the parameter which is sent went disabling caching\nthrough a cache buster. ...

(Optional) Change the parameter which is sent went disabling caching\nthrough a cache buster. Defaults to '_dc'

Defaults to: '_dc'

Ext.Ajax
view source

extraParams : Object

An object containing properties which are used as extra parameters to each request made\nby this object (defaults to u...

An object containing properties which are used as extra parameters to each request made\nby this object (defaults to undefined). Session information and other data that you need\nto pass with each request are commonly put here.

Ext.Ajax
view source

method : String

The default HTTP method to be used for requests. ...

The default HTTP method to be used for requests. Note that this is case-sensitive and\nshould be all caps (defaults to undefined; if not set but params are present will use\n\"POST\", otherwise will use \"GET\".)

Ext.Ajax
view source

timeout : Number

The timeout in milliseconds to be used for requests. ...

The timeout in milliseconds to be used for requests. (defaults to 30000)

Ext.Ajax
view source

url : String

The default URL to be used for requests to the server. ...

The default URL to be used for requests to the server. (defaults to undefined)\nIf the server receives all requests through one URL, setting this once is easier than\nentering it on every request.

Defined By

Methods

Ext.data.Connection
view source

newExt.Ajax( config ) : Ext.data.Connection

...

Parameters

config : Object
a configuration object.
\n

Returns

Ext.data.Connection
\n

Ext.data.Connection
view source

abort( [transactionId] )

Aborts any outstanding request. ...

Aborts any outstanding request.

Parameters

transactionId : Number (optional)
defaults to the last transaction
\n

Ext.util.Observable
view source

addEvents( o, Optional )

Adds the specified events to the list of events which this Observable may fire. ...

Adds the specified events to the list of events which this Observable may fire.

Parameters

o : Object|String
Either an object with event names as properties with a value of true\nor the first event name string if multiple event names are being passed as separate parameters.
\n
Optional : string
. Event name if multiple event names are being passed as separate parameters.\nUsage:
\n\n
```
this.addEvents('storeloaded', 'storecleared');\n
```
\n\n

Ext.util.Observable
view source

addListener( eventName, handler, [scope], [options] )

Appends an event handler to this object. ...

Appends an event handler to this object.

Parameters

eventName : String
The name of the event to listen for.
\n
handler : Function
The method the event invokes.
\n
scope : Object (optional)
The scope (this reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
\n
options : Object (optional)
An object containing handler configuration.\nproperties. This may contain any of the following properties:
- scope : Object
  The scope (this reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
- delay : Number
  The number of milliseconds to delay the invocation of the handler after the event fires.
- single : Boolean
  True to add a handler to handle just the next firing of the event, and then remove itself.
- buffer : Number
  Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed\nby the specified number of milliseconds. If the event fires again within that time, the original\nhandler is not invoked, but the new handler is scheduled in its place.
- target : Observable
  Only call the handler if the event was fired on the target Observable, not\nif the event was bubbled up from a child Observable.
\n\n
\nCombining Options
\nUsing the options argument, it is possible to combine different types of listeners:
\n
\nA delayed, one-time listener.\n
```
myDataView.on('click', this.onClick, this, {\nsingle: true,\ndelay: 100\n});
```
\n
\nAttaching multiple handlers in 1 call
\nThe method also allows for a single argument to be passed which is a config object containing properties\nwhich specify multiple handlers.\n
\n
```
myGridPanel.on({\n'click' : {\n    fn: this.onClick,\n    scope: this,\n    delay: 100\n},\n'mouseover' : {\n    fn: this.onMouseOver,\n    scope: this\n},\n'mouseout' : {\n    fn: this.onMouseOut,\n    scope: this\n}\n});
```
\n
\nOr a shorthand syntax:
\n
```
myGridPanel.on({\n'click' : this.onClick,\n'mouseover' : this.onMouseOver,\n'mouseout' : this.onMouseOut,\n scope: this\n});
```
\n\n

Ext.util.Observable
view source

enableBubble( events )

Enables events fired by this Observable to bubble up an owner hierarchy by calling\nthis.getBubbleTarget() if present. ...

Enables events fired by this Observable to bubble up an owner hierarchy by calling\nthis.getBubbleTarget() if present. There is no implementation in the Observable base class.

\n\n\n

This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default\nimplementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\naccess the required target more quickly.

\n\n\n

Example:

\n\n\n

Ext.override(Ext.form.Field, {\n    //  Add functionality to Field's initComponent to enable the change event to bubble\n    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {\n        this.enableBubble('change');\n    }),\n\n    //  We know that we want Field's events to bubble directly to the FormPanel.\n    getBubbleTarget : function() {\n        if (!this.formPanel) {\n            this.formPanel = this.findParentByType('form');\n        }\n        return this.formPanel;\n    }\n});\n\nvar myForm = new Ext.formPanel({\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});\n

\n\n

Parameters

events : String/Array
The event name to bubble, or an Array of event names.
\n

Ext.util.Observable
view source

fireEvent( eventName, args ) : Boolean

Fires the specified event with the passed parameters (minus the event name). ...

Fires the specified event with the passed parameters (minus the event name).

\n\n\n

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)\nby calling enableBubble.

\n\n

Parameters

eventName : String
The name of the event to fire.
\n
args : Object...
Variable number of parameters are passed to handlers.
\n

Returns

Boolean
returns false if any of the handlers return false otherwise it returns true.
\n

Ext.util.Observable
view source

hasListener( eventName ) : Boolean

Checks to see if this object has any listeners for a specified event ...

Checks to see if this object has any listeners for a specified event

Parameters

eventName : String
The name of the event to check for
\n

Returns

Boolean
True if the event is being listened for, else false
\n

Ext.data.Connection
view source

isLoading( [transactionId] ) : Boolean

Determine whether this object has a request outstanding. ...

Determine whether this object has a request outstanding.

Parameters

transactionId : Number (optional)
defaults to the last transaction
\n

Returns

Boolean
True if there is an outstanding request.
\n

Ext.util.Observable
view source

on( eventName, handler, [scope], [options] )

Appends an event handler to this object (shorthand for addListener.) ...

Appends an event handler to this object (shorthand for addListener.)

Parameters

eventName : String
The type of event to listen for
\n
handler : Function
The method the event invokes
\n
scope : Object (optional)
The scope (this reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
\n
options : Object (optional)
An object containing handler configuration.
\n

Ext.util.Observable
view source

purgeListeners( )

Removes all listeners for this object ...

Removes all listeners for this object

Ext.util.Observable
view source

relayEvents( o, events )

Relays selected events from the specified Observable as if the events were fired by this. ...

Relays selected events from the specified Observable as if the events were fired by this.

Parameters

o : Object
The Observable whose events this object is to relay.
\n
events : Array
Array of event names to relay.
\n

Ext.util.Observable
view source

removeListener( eventName, handler, [scope] )

Removes an event handler. ...

Removes an event handler.

Parameters

eventName : String
The type of event the handler was associated with.
\n
handler : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
\n
scope : Object (optional)
The scope originally specified for the handler.
\n

Ext.data.Connection
view source

request( options ) : Number

Sends an HTTP request to a remote server. ...

Sends an HTTP request to a remote server.

\n\n\n

Important: Ajax server requests are asynchronous, and this call will\nreturn before the response has been received. Process any returned data\nin a callback function.

\n\n\n

Ext.Ajax.request({\n   url: 'ajax_demo/sample.json',\n   success: function(response, opts) {\n      var obj = Ext.decode(response.responseText);\n      console.dir(obj);\n   },\n   failure: function(response, opts) {\n      console.log('server-side failure with status code ' + response.status);\n   }\n});\n

\n\n\n

To execute a callback function in the correct scope, use the scope option.

\n\n

Parameters

options : Object
An object which may contain the following properties:
- url : String/Function (Optional)
  The URL to\nwhich to send the request, or a function to call which returns a URL string. The scope of the\nfunction is specified by the scope option. Defaults to the configured\nurl.
- params : Object/String/Function (Optional)
  \nAn object containing properties which are used as parameters to the\nrequest, a url encoded string or a function to call to get either. The scope of the function\nis specified by the scope option.
- method : String (Optional)
  The HTTP method to use\nfor the request. Defaults to the configured method, or if no method was configured,\n\"GET\" if no parameters are being sent, and \"POST\" if parameters are being sent. Note that\nthe method name is case-sensitive and should be all caps.
- callback : Function (Optional)
  The\nfunction to be called upon receipt of the HTTP response. The callback is\ncalled regardless of success or failure and is passed the following\nparameters:
  - options : Object
    The parameter to the request call.
  - success : Boolean
    True if the request succeeded.
  - response : Object
    The XMLHttpRequest object containing the response data.\nSee http://www.w3.org/TR/XMLHttpRequest/ for details about\naccessing elements of the response.
- success : Function (Optional)
  The function\nto be called upon success of the request. The callback is passed the following\nparameters:
  - response : Object
    The XMLHttpRequest object containing the response data.
  - options : Object
    The parameter to the request call.
- failure : Function (Optional)
  The function\nto be called upon failure of the request. The callback is passed the\nfollowing parameters:
  - response : Object
    The XMLHttpRequest object containing the response data.
  - options : Object
    The parameter to the request call.
- scope : Object (Optional)
  The scope in\nwhich to execute the callbacks: The \"this\" object for the callback function. If the url, or params options were\nspecified as functions from which to draw values, then this also serves as the scope for those function calls.\nDefaults to the browser window.
- timeout : Number (Optional)
  The timeout in milliseconds to be used for this request. Defaults to 30 seconds.
- form : Element/HTMLElement/String (Optional)
  The <form>\nElement or the id of the <form> to pull parameters from.
- isUpload : Boolean (Optional)
  Only meaningful when used\nwith the form option.
  \n\n
  True if the form object is a file upload (will be set automatically if the form was\nconfigured with enctype \"multipart/form-data\").
  \n\n\n
  File uploads are not performed using normal \"Ajax\" techniques, that is they are not\nperformed using XMLHttpRequests. Instead the form is submitted in the standard manner with the\nDOM <form> element temporarily modified to have its\ntarget set to refer\nto a dynamically generated, hidden <iframe> which is inserted into the document\nbut removed after the return data has been gathered.
  \n\n\n
  The server response is parsed by the browser to create the document for the IFRAME. If the\nserver is using JSON to send the return object, then the\nContent-Type header\nmust be set to \"text/html\" in order to tell the browser to insert the text unchanged into the document body.
  \n\n\n
  The response text is retrieved from the document, and a fake XMLHttpRequest object\nis created containing a responseText property in order to conform to the\nrequirements of event handlers and callbacks.
  \n\n\n
  Be aware that file upload packets are sent with the content type multipart/form\nand some server technologies (notably JEE) may require some custom processing in order to\nretrieve parameter names and parameter values from the packet content.
  \n\n\n
- headers : Object (Optional)
  Request\nheaders to set for the request.
- xmlData : Object (Optional)
  XML document\nto use for the post. Note: This will be used instead of params for the post\ndata. Any params will be appended to the URL.
- jsonData : Object/String (Optional)
  JSON\ndata to use as the post. Note: This will be used instead of params for the post\ndata. Any params will be appended to the URL.
- disableCaching : Boolean (Optional)
  True\nto add a unique cache-buster param to GET requests.
\n\n
The options object may also contain any other property which might be needed to perform\npostprocessing in a callback because it is passed to callback functions.
\n\n

Returns

Number
transactionId The id of the server transaction. This may be used\nto cancel the request.
\n

Ext.util.Observable
view source

resumeEvents( )

Resume firing events. ...

Resume firing events. (see suspendEvents)\nIf events were suspended using the queueSuspended parameter, then all\nevents fired during event suspension will be sent to any listeners now.

Ext.Ajax
view source

serializeForm( form ) : String

Serialize the passed form into a url encoded string ...

Serialize the passed form into a url encoded string

Parameters

form : String/HTMLElement
\n

Returns

String
\n

Ext.util.Observable
view source

suspendEvents( queueSuspended )

Suspend the firing of all events. ...

Suspend the firing of all events. (see resumeEvents)

Parameters

queueSuspended : Boolean
Pass as true to queue up suspended events to be fired\nafter the resumeEvents call instead of discarding all suspended events;
\n

Ext.util.Observable
view source

un( eventName, handler, [scope] )

Removes an event handler (shorthand for removeListener.) ...

Removes an event handler (shorthand for removeListener.)

Parameters

eventName : String
The type of event the handler was associated with.
\n
handler : Function
The handler to remove. This must be a reference to the function passed into the addListener call.
\n
scope : Object (optional)
The scope originally specified for the handler.
\n

Defined By

Events

Ext.data.Connection
view source

beforerequest( conn, options )

Fires before a network request is made to retrieve a data object. ...

Fires before a network request is made to retrieve a data object.

Parameters

conn : Connection
This Connection object.
\n
options : Object
The options config object passed to the request method.
\n

Ext.data.Connection
view source

requestcomplete( conn, response, options )

Fires if the request was successfully completed. ...

Fires if the request was successfully completed.

Parameters

conn : Connection
This Connection object.
\n
response : Object
The XHR object containing the response data.\nSee The XMLHttpRequest Object\nfor details.
\n
options : Object
The options config object passed to the request method.
\n

Ext.data.Connection
view source

requestexception( conn, response, options )

Fires if an error HTTP status was returned from the server. ...

Fires if an error HTTP status was returned from the server.\nSee HTTP Status Code Definitions\nfor details of HTTP status codes.

Parameters

conn : Connection
This Connection object.
\n
response : Object
The XHR object containing the response data.\nSee The XMLHttpRequest Object\nfor details.
\n
options : Object
The options config object passed to the request method.
\n