<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-data-proxy-Ajax-method-constructor'><span id='Ext-data-proxy-Ajax'>/**
|
</span></span> * @author Ed Spencer
|
*
|
* 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 {@link Ext.data.Store 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 {@link Ext.data.Model
|
* Model}:
|
*
|
* Ext.define('User', {
|
* extend: 'Ext.data.Model',
|
* fields: ['id', 'name', 'email']
|
* });
|
*
|
* //The Store contains the AjaxProxy as an inline configuration
|
* var store = Ext.create('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 {@link Ext.data.Model Model} with
|
* the fields that we expect the server to return. Next we set up the Store itself, along with a
|
* {@link Ext.data.Store#proxy 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 - {@link #model} and {@link #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 {@link
|
* Ext.data.reader.Reader Reader} is {@link Ext.data.reader.Json 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
|
* {@link #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 {@link 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 {@link Ext.data.proxy.JsonP JsonPProxy}'s introduction docs for more details.
|
*
|
* # Readers and Writers
|
*
|
* AjaxProxy can be configured to use any type of {@link Ext.data.reader.Reader Reader} to decode the server's response.
|
* If no Reader is supplied, AjaxProxy will default to using a {@link Ext.data.reader.Json JsonReader}. Reader
|
* configuration can be passed in as a simple object, which the Proxy automatically turns into a {@link
|
* Ext.data.reader.Reader Reader} instance:
|
*
|
* var proxy = new Ext.data.proxy.Ajax({
|
* model: 'User',
|
* reader: {
|
* type: 'xml',
|
* root: 'users'
|
* }
|
* });
|
*
|
* proxy.getReader(); //returns an {@link Ext.data.reader.Xml 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:
|
*
|
* - {@link #pageParam} - controls how the page number is sent to the server (see also {@link #startParam} and {@link #limitParam})
|
* - {@link #sortParam} - controls how sort information is sent to the server
|
* - {@link #groupParam} - controls how grouping information is sent to the server
|
* - {@link #filterParam} - controls how filter information is sent to the server
|
*
|
* Each request sent by AjaxProxy is described by an {@link Ext.data.Operation 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 {@link #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',
|
* pageParam: '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 {@link Ext.data.Store 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 {@link #encodeFilters} function to encode our filters.
|
*
|
* @constructor
|
* Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the Store's call to
|
* {@link Ext.data.Store#method-load load} will override any specified callback and params options. In this case, use the
|
* {@link Ext.data.Store Store}'s events to modify parameters, or react to loading events.
|
*
|
* @param {Object} config (optional) Config object.
|
* If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make the request.
|
*/
|
Ext.define('Ext.data.proxy.Ajax', {
|
requires: ['Ext.util.MixedCollection', 'Ext.Ajax'],
|
extend: 'Ext.data.proxy.Server',
|
alias: 'proxy.ajax',
|
alternateClassName: ['Ext.data.HttpProxy', 'Ext.data.AjaxProxy'],
|
|
<span id='Ext-data-proxy-Ajax-property-actionMethods'> /**
|
</span> * @property {Object} actionMethods
|
* 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 {@link Ext.data.proxy.Rest} maps these to the
|
* correct RESTful methods.
|
*/
|
actionMethods: {
|
create : 'POST',
|
read : 'GET',
|
update : 'POST',
|
destroy: 'POST'
|
},
|
|
<span id='Ext-data-proxy-Ajax-cfg-binary'> /**
|
</span> * @cfg {Boolean} binary
|
* True to request binary data from the server. This feature requires
|
* the use of a binary reader such as {@link Ext.data.amf.Reader AMF Reader}
|
*/
|
binary: false,
|
|
<span id='Ext-data-proxy-Ajax-cfg-headers'> /**
|
</span> * @cfg {Object} headers
|
* Any headers to add to the Ajax request. Defaults to undefined.
|
*/
|
|
doRequest: function(operation, callback, scope) {
|
var writer = this.getWriter(),
|
request = this.buildRequest(operation);
|
|
if (operation.allowWrite()) {
|
request = writer.write(request);
|
}
|
|
Ext.apply(request, {
|
binary : this.binary,
|
headers : this.headers,
|
timeout : this.timeout,
|
scope : this,
|
callback : this.createRequestCallback(request, operation, callback, scope),
|
method : this.getMethod(request),
|
disableCaching: false // explicitly set it to false, ServerProxy handles caching
|
});
|
|
Ext.Ajax.request(request);
|
|
return request;
|
},
|
|
<span id='Ext-data-proxy-Ajax-method-getMethod'> /**
|
</span> * Returns the HTTP method name for a given request. By default this returns based on a lookup on
|
* {@link #actionMethods}.
|
* @param {Ext.data.Request} request The request object
|
* @return {String} The HTTP method to use (should be one of 'GET', 'POST', 'PUT' or 'DELETE')
|
*/
|
getMethod: function(request) {
|
return this.actionMethods[request.action];
|
},
|
|
<span id='Ext-data-proxy-Ajax-method-createRequestCallback'> /**
|
</span> * @private
|
* TODO: This is currently identical to the JsonPProxy version except for the return function's signature. There is a lot
|
* of code duplication inside the returned function so we need to find a way to DRY this up.
|
* @param {Ext.data.Request} request The Request object
|
* @param {Ext.data.Operation} operation The Operation being executed
|
* @param {Function} callback The callback function to be called when the request completes. This is usually the callback
|
* passed to doRequest
|
* @param {Object} scope The scope in which to execute the callback function
|
* @return {Function} The callback function
|
*/
|
createRequestCallback: function(request, operation, callback, scope) {
|
var me = this;
|
|
return function(options, success, response) {
|
me.processResponse(success, operation, request, response, callback, scope);
|
};
|
}
|
}, function() {
|
//backwards compatibility, remove in Ext JS 5.0
|
Ext.data.HttpProxy = this;
|
});
|
</pre>
|
</body>
|
</html>
|