Clear Up
SharpKit Reference

Ajax Class

A singleton instance of an Ext.data.Connection. This class is used to communicate with your server side code. It can be used as follows:

  
    Ext.Ajax.request({
            url: 'page.php',
            params: {
            id: 1
            },
            success: function(response){
            var text = response.responseText;
            // process server response here
            }
            });
            

Default options for all requests can be set by changing a property on the Ext.Ajax class:

  
    Ext.Ajax.timeout = 60000; // 60 seconds
            

Any options specified in the request method for the Ajax request will override any defaults set on the Ext.Ajax class. In the code sample below, the timeout for the request will be 60 seconds.

  
    Ext.Ajax.timeout = 120000; // 120 seconds
            Ext.Ajax.request({
            url: 'page.aspx',
            timeout: 60000
            });
            

In general, this class will be used for all Ajax requests in your application. The main reason for creating a separate Ext.data.Connection is for a series of requests that share common settings that are different to all other requests in the application.

Namespace: Ext

Base Interfaces

Constructors

Methods

Name Description
abort(object) Aborts an active request.
abortAll() Aborts all active requests
addEvents(object) Adds the specified events to the list of events which this Observable may fire.
addListener(object, Delegate, object, object) Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
addManagedListener(object, object, Delegate, object, object) Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
callOverridden(object) Call the original method that was previously overridden with override
  Ext.define('My.Cat', {
            constructor: function() {
            alert("I'm a cat!");
            }
            });
            My.Cat.override({
            constructor: function() {
            alert("I'm going to be a cat!");
            this.callOverridden();
            alert("Meeeeoooowwww");
            }
            });
            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
            // alerts "I'm a cat!"
            // alerts "Meeeeoooowwww"
            

This method has been deprecated

as of 4.1. Use callParent instead.

callParent(object) Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
  Ext.define('My.Base', {
            constructor: function (x) {
            this.x = x;
            },
            statics: {
            method: function (x) {
            return x;
            }
            }
            });
            Ext.define('My.Derived', {
            extend: 'My.Base',
            constructor: function () {
            this.callParent([21]);
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // alerts 21
            
This can be used with an override as follows:
  Ext.define('My.DerivedOverride', {
            override: 'My.Derived',
            constructor: function (x) {
            this.callParent([x*2]); // calls original My.Derived constructor
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // now alerts 42
            
This also works with static methods.
  Ext.define('My.Derived2', {
            extend: 'My.Base',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Base.method
            }
            }
            });
            alert(My.Base.method(10);     // alerts 10
            alert(My.Derived2.method(10); // alerts 20
            
Lastly, it also works with overridden static methods.
  Ext.define('My.Derived2Override', {
            override: 'My.Derived2',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Derived2.method
            }
            }
            });
            alert(My.Derived2.method(10); // now alerts 40
            
clearListeners() Removes all listeners for this object including the managed listeners
clearManagedListeners() Removes all managed listeners for this object.
enableBubble(object) 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.Base, {
            //  Add functionality to Field's initComponent to enable the change event to bubble
            initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, 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');
            }
            }
            });
            
fireEvent(JsString, Object[]) Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
getInitialConfig(object) Returns the initial configuration passed to constructor when instantiating this class.
hasListener(JsString) Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer indicates whether the event needs firing or not.
initConfig(object) Initialize configuration for this class. a typical example:
  Ext.define('My.awesome.Class', {
            // The default config
            config: {
            name: 'Awesome',
            isAwesome: true
            },
            constructor: function(config) {
            this.initConfig(config);
            }
            });
            var awesome = new My.awesome.Class({
            name: 'Super Awesome'
            });
            alert(awesome.getName()); // 'Super Awesome'
            
isLoading(object) Determines whether this object has a request outstanding.
mon(object, object, Delegate, object, object) Shorthand for addManagedListener. Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
mun(object, object, Delegate, object) Shorthand for removeManagedListener. Removes listeners that were added by the mon method.
on(object, Delegate, object, object) Shorthand for addListener. Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
parseStatus(JsNumber) Checks if the response status was successful
relayEvents(object, JsArray<T>, object) Relays 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. So you can do this inside your initComponent:
this.relayEvents(this.getStore(), ['load']);
            
The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the this keyword.
removeListener(JsString, Delegate, object) Removes an event handler.
removeManagedListener(object, object, Delegate, object) Removes listeners that were added by the mon method.
request(object) Sends an HTTP request to a remote server. Important: Ajax server requests are asynchronous, and this call will return before the response has been received. Process any returned data in a callback function.
  Ext.Ajax.request({
            url: 'ajax_demo/sample.json',
            success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            console.dir(obj);
            },
            failure: function(response, opts) {
            console.log('server-side failure with status code ' + response.status);
            }
            });
            
To execute a callback function in the correct scope, use the scope option.
resumeEvents() Resumes firing events (see suspendEvents). If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
setOptions(object, object) Sets various options such as the url, params for the request
setupMethod(object, JsString) Template method for overriding method

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

setupParams(object, JsString) Template method for overriding params

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

setupUrl(object, JsString) Template method for overriding url

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

statics() Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time
  Ext.define('My.Cat', {
            statics: {
            totalCreated: 0,
            speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
            },
            constructor: function() {
            var statics = this.statics();
            alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
            // equivalent to: My.Cat.speciesName
            alert(this.self.speciesName);   // dependent on 'this'
            statics.totalCreated++;
            },
            clone: function() {
            var cloned = new this.self;                      // dependent on 'this'
            cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
            return cloned;
            }
            });
            Ext.define('My.SnowLeopard', {
            extend: 'My.Cat',
            statics: {
            speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
            },
            constructor: function() {
            this.callParent();
            }
            });
            var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
            var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
            var clone = snowLeopard.clone();
            alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
            alert(clone.groupName);                 // alerts 'Cat'
            alert(My.Cat.totalCreated);             // alerts 3
            
suspendEvents(bool) Suspends the firing of all events. (see resumeEvents)
un(JsString, Delegate, object) Shorthand for removeListener. Removes an event handler.
upload(object, JsString, JsString, object) Uploads a form using a hidden iframe.

Properties

Name Description
autoAbort Whether a new request should abort any pending requests. Defaults to: false
defaultHeaders An object containing request headers which are added to each request made by this object.
disableCaching True to add a unique cache-buster param to GET requests. Defaults to true.
extraParams An object containing properties which are used as extra parameters to each request made by this object. Session information and other data that you need to pass with each request are commonly put here.
hasListeners This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the MVC EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event. The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:
if (this.hasListeners.foo) {
           this.fireEvent('foo', this, arg1);
           }
            
isObservable true in this class to identify an object as an instantiated Observable, or subclass thereof. Defaults to: true
method The default HTTP method to be used for requests. Note that this is case-sensitive and should be all caps (if not set but params are present will use "POST", otherwise will use "GET".)
timeout The timeout in milliseconds to be used for requests. Defaults to 30000.
url The default URL to be used for requests to the server. If the server receives all requests through one URL, setting this once is easier than entering it on every request.

Fields

Name Description
cors True to enable CORS support on the XHR object. Currently the only effect of this option is to use the XDomainRequest object instead of XMLHttpRequest if the browser is IE8 or above. Defaults to: false
disableCachingParam Change the parameter which is sent went disabling caching through a cache buster. Defaults to: "_dc"
listeners A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from Ext JS Components While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only 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 child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:
new Ext.panel.Panel({
            width: 400,
            height: 200,
            dockedItems: [{
            xtype: 'toolbar'
            }],
            listeners: {
            click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
            },
            dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
            }
            }
            });
            
withCredentials True to set withCredentials = true on the XHR object Defaults to: false
© Copyright 2005-2011 SharpKit. All rights reserved.