Rest.html
7.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!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-Rest'>/**
</span> * @author Ed Spencer
*
* The Rest proxy is a specialization of the {@link Ext.data.proxy.Ajax AjaxProxy} which simply maps the four actions
* (create, read, update and destroy) to RESTful HTTP verbs. For example, let's set up a {@link Ext.data.Model Model}
* with an inline Rest proxy
*
* Ext.define('User', {
* extend: 'Ext.data.Model',
* fields: ['id', 'name', 'email'],
*
* proxy: {
* type: 'rest',
* url : '/users'
* }
* });
*
* Now we can create a new User instance and save it via the Rest proxy. Doing this will cause the Proxy to send a POST
* request to '/users':
*
* var user = Ext.create('User', {name: 'Ed Spencer', email: 'ed@sencha.com'});
*
* user.save(); //POST /users
*
* Let's expand this a little and provide a callback for the {@link Ext.data.Model#save} call to update the Model once
* it has been created. We'll assume the creation went successfully and that the server gave this user an ID of 123:
*
* user.save({
* success: function(user) {
* user.set('name', 'Khan Noonien Singh');
*
* user.save(); //PUT /users/123
* }
* });
*
* Now that we're no longer creating a new Model instance, the request method is changed to an HTTP PUT, targeting the
* relevant url for that user. Now let's delete this user, which will use the DELETE method:
*
* user.destroy(); //DELETE /users/123
*
* Finally, when we perform a load of a Model or Store, Rest proxy will use the GET method:
*
* //1. Load via Store
*
* //the Store automatically picks up the Proxy from the User model
* var store = Ext.create('Ext.data.Store', {
* model: 'User'
* });
*
* store.load(); //GET /users
*
* //2. Load directly from the Model
*
* //GET /users/123
* Ext.ModelManager.getModel('User').load(123, {
* success: function(user) {
* console.log(user.getId()); //outputs 123
* }
* });
*
* # Url generation
*
* The Rest proxy is able to automatically generate the urls above based on two configuration options - {@link #appendId} and
* {@link #format}. If appendId is true (it is by default) then Rest proxy will automatically append the ID of the Model
* instance in question to the configured url, resulting in the '/users/123' that we saw above.
*
* If the request is not for a specific Model instance (e.g. loading a Store), the url is not appended with an id.
* The Rest proxy will automatically insert a '/' before the ID if one is not already present.
*
* new Ext.data.proxy.Rest({
* url: '/users',
* appendId: true //default
* });
*
* // Collection url: /users
* // Instance url : /users/123
*
* The Rest proxy can also optionally append a format string to the end of any generated url:
*
* new Ext.data.proxy.Rest({
* url: '/users',
* format: 'json'
* });
*
* // Collection url: /users.json
* // Instance url : /users/123.json
*
* If further customization is needed, simply implement the {@link #buildUrl} method and add your custom generated url
* onto the {@link Ext.data.Request Request} object that is passed to buildUrl. See [Rest proxy's implementation][1] for
* an example of how to achieve this.
*
* Note that Rest proxy inherits from {@link Ext.data.proxy.Ajax AjaxProxy}, which already injects all of the sorter,
* filter, group and paging options into the generated url. See the {@link Ext.data.proxy.Ajax AjaxProxy docs} for more
* details.
*
* [1]: source/Rest.html#Ext-data-proxy-Rest-method-buildUrl
*/
Ext.define('Ext.data.proxy.Rest', {
extend: 'Ext.data.proxy.Ajax',
alternateClassName: 'Ext.data.RestProxy',
alias : 'proxy.rest',
<span id='Ext-data-proxy-Rest-cfg-appendId'> /**
</span> * @cfg {Boolean} appendId
* True to automatically append the ID of a Model instance when performing a request based on that single instance.
* See Rest proxy intro docs for more details. Defaults to true.
*/
appendId: true,
<span id='Ext-data-proxy-Rest-cfg-format'> /**
</span> * @cfg {String} format
* Optional data format to send to the server when making any request (e.g. 'json'). See the Rest proxy intro docs
* for full details. Defaults to undefined.
*/
<span id='Ext-data-proxy-Rest-cfg-batchActions'> /**
</span> * @cfg {Boolean} batchActions
* True to batch actions of a particular type when synchronizing the store. Defaults to false.
*/
batchActions: false,
<span id='Ext-data-proxy-Rest-method-buildUrl'> /**
</span> * Specialized version of buildUrl that incorporates the {@link #appendId} and {@link #format} options into the
* generated url. Override this to provide further customizations, but remember to call the superclass buildUrl so
* that additional parameters like the cache buster string are appended.
* @param {Object} request
*/
buildUrl: function(request) {
var me = this,
operation = request.operation,
records = operation.records || [],
record = records[0],
format = me.format,
url = me.getUrl(request),
id = record ? record.getId() : operation.id;
if (me.appendId && id) {
if (!url.match(/\/$/)) {
url += '/';
}
url += id;
}
if (format) {
if (!url.match(/\.$/)) {
url += '.';
}
url += format;
}
request.url = url;
return me.callParent(arguments);
}
}, function() {
Ext.apply(this.prototype, {
<span id='Ext-data-proxy-Rest-property-actionMethods'> /**
</span> * @property {Object} actionMethods
* Mapping of action name to HTTP request method. These default to RESTful conventions for the 'create', 'read',
* 'update' and 'destroy' actions (which map to 'POST', 'GET', 'PUT' and 'DELETE' respectively). This object
* should not be changed except globally via {@link Ext#override Ext.override} - the {@link #getMethod} function
* can be overridden instead.
*/
actionMethods: {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy: 'DELETE'
}
});
});
</pre>
</body>
</html>