X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/api/Ext.data.proxy.Ajax.html diff --git a/docs/api/Ext.data.proxy.Ajax.html b/docs/api/Ext.data.proxy.Ajax.html deleted file mode 100644 index fb7dac60..00000000 --- a/docs/api/Ext.data.proxy.Ajax.html +++ /dev/null @@ -1,864 +0,0 @@ -
Hierarchy
Ext.data.proxy.ProxyExt.data.proxy.ServerExt.data.proxy.AjaxMixins
AjaxProxy is one of the most widely-used ways of getting data into your application. It uses AJAX requests to -load data from the server, usually to be placed into a Store. Let's take a look at a typical -setup. Here we're going to set up a Store that has an AjaxProxy. To prepare, we'll also set up a -Model:
- - - - -Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: ['id', 'name', 'email']
-});
-
-//The Store contains the AjaxProxy as an inline configuration
-var store = new Ext.data.Store({
- model: 'User',
- proxy: {
- type: 'ajax',
- url : 'users.json'
- }
-});
-
-store.load();
-
-
-
-
-
-Our example is going to load user data into a Store, so we start off by defining a Model -with the fields that we expect the server to return. Next we set up the Store itself, along with a proxy -configuration. This configuration was automatically turned into an Ext.data.proxy.Ajax instance, with the url we -specified being passed into AjaxProxy's constructor. It's as if we'd done this:
- - - - -new Ext.data.proxy.Ajax({
- url: 'users.json',
- model: 'User',
- reader: 'json'
-});
-
-
-
-
-
-A couple of extra configurations appeared here - model and reader. These are set by default -when we create the proxy via the Store - the Store already knows about the Model, and Proxy's default -Reader is JsonReader.
- - - - -Now when we call store.load(), the AjaxProxy springs into action, making a request to the url we configured -('users.json' in this case). As we're performing a read, it sends a GET request to that url (see actionMethods -to customize this - by default any kind of read will be sent as a GET request and any kind of write will be sent as a -POST request).
- - - - -Limitations
- - - - -AjaxProxy cannot be used to retrieve data from other domains. If your application is running on http://domainA.com -it cannot load data from http://domainB.com because browsers have a built-in security policy that prohibits domains -talking to each other via AJAX.
- - - - -If you need to read data from another domain and can't set up a proxy server (some software that runs on your own -domain's web server and transparently forwards requests to http://domainB.com, making it look like they actually came -from http://domainA.com), you can use Ext.data.proxy.JsonP and a technique known as JSON-P (JSON with -Padding), which can help you get around the problem so long as the server on http://domainB.com is set up to support -JSON-P responses. See JsonPProxy's introduction docs for more details.
- - - - -Readers and Writers
- - - - -AjaxProxy can be configured to use any type of Reader to decode the server's response. If -no Reader is supplied, AjaxProxy will default to using a JsonReader. Reader configuration -can be passed in as a simple object, which the Proxy automatically turns into a Reader -instance:
- - - - -var proxy = new Ext.data.proxy.Ajax({
- model: 'User',
- reader: {
- type: 'xml',
- root: 'users'
- }
-});
-
-proxy.getReader(); //returns an XmlReader instance based on the config we supplied
-
-
-
-
-
-Url generation
- - - - -AjaxProxy automatically inserts any sorting, filtering, paging and grouping options into the url it generates for -each request. These are controlled with the following configuration options:
- - - - -Each request sent by AjaxProxy is described by an Operation. To see how we can -customize the generated urls, let's say we're loading the Proxy with the following Operation:
- - - - -var operation = new Ext.data.Operation({
- action: 'read',
- page : 2
-});
-
-
-
-
-
-Now we'll issue the request for this Operation by calling read:
- - - - -var proxy = new Ext.data.proxy.Ajax({
- url: '/users'
-});
-
-proxy.read(operation); //GET /users?page=2
-
-
-
-
-
-Easy enough - the Proxy just copied the page property from the Operation. We can customize how this page data is -sent to the server:
- - - - -var proxy = new Ext.data.proxy.Ajax({
- url: '/users',
- pagePage: 'pageNumber'
-});
-
-proxy.read(operation); //GET /users?pageNumber=2
-
-
-
-
-
-Alternatively, our Operation could have been configured to send start and limit parameters instead of page:
- - - - -var operation = new Ext.data.Operation({
- action: 'read',
- start : 50,
- limit : 25
-});
-
-var proxy = new Ext.data.proxy.Ajax({
- url: '/users'
-});
-
-proxy.read(operation); //GET /users?start=50&limit=25
-
-
-
-
-
-Again we can customize this url:
- - - - -var proxy = new Ext.data.proxy.Ajax({
- url: '/users',
- startParam: 'startIndex',
- limitParam: 'limitIndex'
-});
-
-proxy.read(operation); //GET /users?startIndex=50&limitIndex=25
-
-
-
-
-
-AjaxProxy will also send sort and filter information to the server. Let's take a look at how this looks with a -more expressive Operation object:
- - - - -var operation = new Ext.data.Operation({
- action: 'read',
- sorters: [
- new Ext.util.Sorter({
- property : 'name',
- direction: 'ASC'
- }),
- new Ext.util.Sorter({
- property : 'age',
- direction: 'DESC'
- })
- ],
- filters: [
- new Ext.util.Filter({
- property: 'eyeColor',
- value : 'brown'
- })
- ]
-});
-
-
-
-
-
-This is the type of object that is generated internally when loading a Store with sorters -and filters defined. By default the AjaxProxy will JSON encode the sorters and filters, resulting in something like -this (note that the url is escaped before sending the request, but is left unescaped here for clarity):
- - - - -var proxy = new Ext.data.proxy.Ajax({
- url: '/users'
-});
-
-proxy.read(operation); //GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter=[{"property":"eyeColor","value":"brown"}]
-
-
-
-
-
-We can again customize how this is created by supplying a few configuration options. Let's say our server is set -up to receive sorting information is a format like "sortBy=name#ASC,age#DESC". We can configure AjaxProxy to provide -that format like this:
- - - - - var proxy = new Ext.data.proxy.Ajax({
- url: '/users',
- sortParam: 'sortBy',
- filterParam: 'filterBy',
-
- //our custom implementation of sorter encoding - turns our sorters into "name#ASC,age#DESC"
- encodeSorters: function(sorters) {
- var length = sorters.length,
- sortStrs = [],
- sorter, i;
-
- for (i = 0; i < length; i++) {
- sorter = sorters[i];
-
- sortStrs[i] = sorter.property + '#' + sorter.direction
- }
-
- return sortStrs.join(",");
- }
- });
-
- proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&filterBy=[{"property":"eyeColor","value":"brown"}]
-
-
-
-
-
-We can also provide a custom encodeFilters function to encode our filters.
- -Specific urls to call on CRUD action methods "read", "create", "update" and "destroy". -Defaults to:
- -api: {
- read : undefined,
- create : undefined,
- update : undefined,
- destroy : undefined
-}
-
-
-
-The url is built based upon the action being executed [load|create|save|destroy] -using the commensurate api property, or if undefined default to the -configured Ext.data.Store.url.
- - -For example:
- - -api: {
- load : '/controller/load',
- create : '/controller/new',
- save : '/controller/update',
- destroy : '/controller/destroy_action'
-}
-
-
-
-If the specific URL for a given CRUD action is undefined, the CRUD action request -will be directed to the configured url.
- -True to batch actions of a particular type when synchronizing the store. -Defaults to true.
-True to batch actions of a particular type when synchronizing the store. -Defaults to true.
-Comma-separated ordering 'create', 'update' and 'destroy' actions when batching. Override this -to set a different order for the batched CRUD actions to be executed in. Defaults to 'create,update,destroy'
-The name of the cache param added to the url when using noCache (defaults to "_dc")
-The name of the cache param added to the url when using noCache (defaults to "_dc")
-The name of the direction parameter to send in a request. This is only used when simpleSortMode is set to true. -Defaults to 'dir'.
-Extra parameters that will be included on every request. Individual requests with params -of the same name will override these params when they are in conflict.
-The name of the 'filter' parameter to send in a request. Defaults to 'filter'. Set -this to undefined if you don't want to send a filter parameter
-The name of the 'group' parameter to send in a request. Defaults to 'group'. Set this -to undefined if you don't want to send a group parameter
-Any headers to add to the Ajax request. Defaults to undefined.
-Any headers to add to the Ajax request. Defaults to undefined.
-The name of the 'limit' parameter to send in a request. Defaults to 'limit'. Set this -to undefined if you don't want to send a limit parameter
-(optional)
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 ExtJs Components
- - -While some ExtJs 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
-click
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'); }
- }
- }
-});
-
-
-
-
-The name of the Model to tie to this Proxy. Can be either the string name of -the Model, or a reference to the Model constructor. Required.
-(optional) Defaults to true. Disable caching by adding a unique parameter -name to the request.
-(optional) Defaults to true. Disable caching by adding a unique parameter -name to the request.
-The name of the 'page' parameter to send in a request. Defaults to 'page'. Set this to -undefined if you don't want to send a page parameter
-The Ext.data.reader.Reader to use to decode the server's response. This can -either be a Reader instance, a config object or just a valid Reader type name (e.g. 'json', 'xml').
-Enabling simpleSortMode in conjunction with remoteSort will only send one sort property and a direction when a remote sort is requested. -The directionParam and sortParam will be sent with the property name and either 'ASC' or 'DESC'
-The name of the 'sort' parameter to send in a request. Defaults to 'sort'. Set this -to undefined if you don't want to send a sort parameter
-The name of the 'start' parameter to send in a request. Defaults to 'start'. Set this -to undefined if you don't want to send a start parameter
-(optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
-(optional) The number of milliseconds to wait for a response. Defaults to 30 seconds.
-The Ext.data.writer.Writer to use to encode any request sent to the server. -This can either be a Writer instance, a config object or just a valid Writer type name (e.g. 'json', 'xml').
-Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' -for 'create', 'update' and 'destroy' actions. The Ext.data.proxy.Rest maps these to the correct RESTful methods.
-Note that if this HttpProxy is being used by a Store, then the -Store's call to load will override any specified callback and params -options. In this case, use the Store's events to modify parameters, -or react to loading events. The Store's baseParams may also be -used to pass parameters known at instantiation time.
- - - - -If an options parameter is passed, the singleton Ext.Ajax object will be used to make -the request.
- -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.
-Either an object with event names as properties with a value of true
-or the first event name string if multiple event names are being passed as separate parameters.
[additional] Optional additional event names if multiple event names are being passed as separate parameters. -Usage:
- -this.addEvents('storeloaded', 'storecleared');
-
-
-Appends an event handler to this object.
-Appends an event handler to this object.
-The name of the event to listen for. May also be an object who's property names are event names. See
-The method the event invokes.
-(optional) The scope (this
reference) in which the handler function is executed.
-If omitted, defaults to the object which fired the event.
(optional) An object containing handler configuration. -properties. This may contain any of the following properties:
this
reference) in which the handler function is executed.
-If omitted, defaults to the object which fired the event.This option is useful during Component construction to add DOM event listeners to elements of Components which -will exist only after the Component is rendered. For example, to add a click listener to a Panel's body: -
new Ext.panel.Panel({
- title: 'The title',
- listeners: {
- click: this.handlePanelClick,
- element: 'body'
- }
-});
-
-
-
-When added in this way, the options available are the options applicable to Ext.core.Element.addListener
- - -
-Combining Options
-Using the options argument, it is possible to combine different types of listeners:
-
-A delayed, one-time listener.
-
myPanel.on('hide', this.handleClick, this, {
-single: true,
-delay: 100
-});
-
-Attaching multiple handlers in 1 call
-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
-});
-
.
-- -
Adds listeners to any Observable object (or Element) which are automatically removed when this Component -is destroyed. - -
Adds listeners to any Observable object (or Element) which are automatically removed when this Component -is destroyed. - -
The item to which to add a listener/listeners.
-The event name, or an object containing event name properties.
-Optional. If the ename
parameter was an event name, this
-is the handler function.
Optional. If the ename
parameter was an event name, this
-is the scope (this
reference) in which the handler function is executed.
Optional. If the ename
parameter was an event name, this
-is the addListener options.
Performs a batch of Operations, in the order specified by batchOrder. Used internally by -Ext.data.Store's sync method. Example usage:
- -myProxy.batch({
- create : [myModel1, myModel2],
- update : [myModel3],
- destroy: [myModel4, myModel5]
-});
-
-
-
-Where the myModel* above are Model instances - in this case 1 and 2 are new instances and have not been -saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been saved but should now be destroyed.
-Object containing the Model instances to act upon, keyed by action name
-Optional listeners object passed straight through to the Batch - see Ext.data.Batch
-The newly created Ext.data.Batch object
-Creates and returns an Ext.data.Request object based on the options passed by the Store -that this Proxy is attached to.
-Creates and returns an Ext.data.Request object based on the options passed by the Store -that this Proxy is attached to.
-The Operation object to execute
-The request object
-Generates a url based on a given Ext.data.Request object. By default, ServerProxy's buildUrl will -add the cache-buster param to the end of the url. Subclasses may need to perform additional modifications -to the url.
-The request object
-The url
-Starts capture on the specified Observable. All events will be passed -to the supplied function with the event name + standard signature of the event -before the event is fired. If the supplied function returns false, -the event will not fire.
-The Observable to capture events from.
-The function to call when an event is fired.
-(optional) The scope (this
reference) in which the function is executed. Defaults to the Observable firing the event.
Removes all listeners for this object including the managed listeners
-Removes all listeners for this object including the managed listeners
-Removes all managed listeners for this object.
-Removes all managed listeners for this object.
-In ServerProxy subclasses, the create, read, update and destroy methods all pass -through to doRequest. Each ServerProxy subclass must implement the doRequest method - see Ext.data.proxy.JsonP -and Ext.data.proxy.Ajax for examples. This method carries the same signature as each of the methods that delegate to it.
-The Ext.data.Operation object
-The callback function to call when the Operation has completed
-The scope in which to execute the callback
-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');
- }
-}
-});
-
-
-The event name to bubble, or an Array of event names.
-Encodes the array of Ext.util.Filter objects into a string to be sent in the request url. By default, -this simply JSON-encodes the filter data
-The array of Filter objects
-The encoded filters
-Encodes the array of Ext.util.Sorter objects into a string to be sent in the request url. By default, -this simply JSON-encodes the sorter data
-The array of Sorter objects
-The encoded sorters
-Fires the specified event with the passed parameters (minus the event name).
- - -An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) -by calling enableBubble.
- -The name of the event to fire.
-Variable number of parameters are passed to handlers.
-returns false if any of the handlers return false otherwise it returns true.
-Returns the HTTP method name for a given request. By default this returns based on a lookup on actionMethods.
-Returns the HTTP method name for a given request. By default this returns based on a lookup on actionMethods.
-The request object
-The HTTP method to use (should be one of 'GET', 'POST', 'PUT' or 'DELETE')
-Returns the model attached to this Proxy
-Returns the model attached to this Proxy
-The model
-Returns the reader currently attached to this proxy instance
-Returns the reader currently attached to this proxy instance
-The Reader instance
-Returns the writer currently attached to this proxy instance
-Returns the writer currently attached to this proxy instance
-The Writer instance
-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
-The name of the event to check for
-True if the event is being listened for, else false
-Sets observability on the passed class constructor.
- -This makes any event fired on any instance of the passed class also fire a single event through -the class allowing for central handling of events on many instances at once.
- -Usage:
- -Ext.util.Observable.observe(Ext.data.Connection);
-Ext.data.Connection.on('beforerequest', function(con, options) {
- console.log('Ajax request made to ' + options.url);
-});
-
-The class constructor to make observable.
-An object containing a series of listeners to add. See addListener.
-Appends an event handler to this object (shorthand for addListener.)
-Appends an event handler to this object (shorthand for addListener.)
-The type of event to listen for
-The method the event invokes
-(optional) The scope (this
reference) in which the handler function is executed.
-If omitted, defaults to the object which fired the event.
(optional) An object containing handler configuration.
-
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
.
The Observable whose events this object is to relay.
-Array of event names to relay.
-Removes all added captures from the Observable.
-Removes all added captures from the Observable.
-The Observable to release
-Removes an event handler.
-Removes an event handler.
-The type of event the handler was associated with.
-The handler to remove. This must be a reference to the function passed into the addListener call.
-(optional) The scope originally specified for the handler.
-Removes listeners that were added by the mon method.
-Removes listeners that were added by the mon method.
-The item from which to remove a listener/listeners.
-The event name, or an object containing event name properties.
-Optional. If the ename
parameter was an event name, this
-is the handler function.
Optional. If the ename
parameter was an event name, this
-is the scope (this
reference) in which the handler function is executed.
Resume 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.
Sets the model associated with this proxy. This will only usually be called by a Store
-Sets the model associated with this proxy. This will only usually be called by a Store
-The new model. Can be either the model name string, -or a reference to the model's constructor
-Sets the new model on the associated Store, if one is present
-Sets the Proxy's Reader by string, config object or Reader instance
-Sets the Proxy's Reader by string, config object or Reader instance
-The new Reader, which can be either a type string, a configuration object -or an Ext.data.reader.Reader instance
-The attached Reader object
-Sets the Proxy's Writer by string, config object or Writer instance
-Sets the Proxy's Writer by string, config object or Writer instance
-The new Writer, which can be either a type string, a configuration object -or an Ext.data.writer.Writer instance
-The attached Writer object
-Suspend the firing of all events. (see resumeEvents)
-Suspend the firing of all events. (see resumeEvents)
-Pass as true to queue up suspended events to be fired -after the resumeEvents call instead of discarding all suspended events;
-Removes an event handler (shorthand for removeListener.)
-Removes an event handler (shorthand for removeListener.)
-The type of event the handler was associated with.
-The handler to remove. This must be a reference to the function passed into the addListener call.
-(optional) The scope originally specified for the handler.
-