Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / RemotingProvider.html
1 <html>
2 <head>
3   <title>The source code</title>
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
6 </head>
7 <body  onload="prettyPrint();">
8     <pre class="prettyprint lang-js">/*!
9  * Ext JS Library 3.0.3
10  * Copyright(c) 2006-2009 Ext JS, LLC
11  * licensing@extjs.com
12  * http://www.extjs.com/license
13  */
14 <div id="cls-Ext.direct.RemotingProvider"></div>/**\r
15  * @class Ext.direct.RemotingProvider\r
16  * @extends Ext.direct.JsonProvider\r
17  * \r
18  * <p>The {@link Ext.direct.RemotingProvider RemotingProvider} exposes access to\r
19  * server side methods on the client (a remote procedure call (RPC) type of\r
20  * connection where the client can initiate a procedure on the server).</p>\r
21  * \r
22  * <p>This allows for code to be organized in a fashion that is maintainable,\r
23  * while providing a clear path between client and server, something that is\r
24  * not always apparent when using URLs.</p>\r
25  * \r
26  * <p>To accomplish this the server-side needs to describe what classes and methods\r
27  * are available on the client-side. This configuration will typically be\r
28  * outputted by the server-side Ext.Direct stack when the API description is built.</p>\r
29  */\r
30 Ext.direct.RemotingProvider = Ext.extend(Ext.direct.JsonProvider, {       \r
31     <div id="cfg-Ext.direct.RemotingProvider-actions"></div>/**\r
32      * @cfg {Object} actions\r
33      * Object literal defining the server side actions and methods. For example, if\r
34      * the Provider is configured with:\r
35      * <pre><code>\r
36 "actions":{ // each property within the 'actions' object represents a server side Class \r
37     "TestAction":[ // array of methods within each server side Class to be   \r
38     {              // stubbed out on client\r
39         "name":"doEcho", \r
40         "len":1            \r
41     },{\r
42         "name":"multiply",// name of method\r
43         "len":2           // The number of parameters that will be used to create an\r
44                           // array of data to send to the server side function.\r
45                           // Ensure the server sends back a Number, not a String. \r
46     },{\r
47         "name":"doForm",\r
48         "formHandler":true, // direct the client to use specialized form handling method \r
49         "len":1\r
50     }]\r
51 }\r
52      * </code></pre>\r
53      * <p>Note that a Store is not required, a server method can be called at any time.\r
54      * In the following example a <b>client side</b> handler is used to call the\r
55      * server side method "multiply" in the server-side "TestAction" Class:</p>\r
56      * <pre><code>\r
57 TestAction.multiply(\r
58     2, 4, // pass two arguments to server, so specify len=2\r
59     // callback function after the server is called\r
60     // result: the result returned by the server\r
61     //      e: Ext.Direct.RemotingEvent object\r
62     function(result, e){\r
63         var t = e.getTransaction();\r
64         var action = t.action; // server side Class called\r
65         var method = t.method; // server side method called\r
66         if(e.status){\r
67             var answer = Ext.encode(result); // 8\r
68     \r
69         }else{\r
70             var msg = e.message; // failure message\r
71         }\r
72     }\r
73 );\r
74      * </code></pre>\r
75      * In the example above, the server side "multiply" function will be passed two\r
76      * arguments (2 and 4).  The "multiply" method should return the value 8 which will be\r
77      * available as the <tt>result</tt> in the example above. \r
78      */\r
79     \r
80     <div id="cfg-Ext.direct.RemotingProvider-namespace"></div>/**\r
81      * @cfg {String/Object} namespace\r
82      * Namespace for the Remoting Provider (defaults to the browser global scope of <i>window</i>).\r
83      * Explicitly specify the namespace Object, or specify a String to have a\r
84      * {@link Ext#namespace namespace created} implicitly.\r
85      */\r
86     \r
87     <div id="cfg-Ext.direct.RemotingProvider-url"></div>/**\r
88      * @cfg {String} url\r
89      * <b>Required<b>. The url to connect to the {@link Ext.Direct} server-side router. \r
90      */\r
91     \r
92     <div id="cfg-Ext.direct.RemotingProvider-enableUrlEncode"></div>/**\r
93      * @cfg {String} enableUrlEncode\r
94      * Specify which param will hold the arguments for the method.\r
95      * Defaults to <tt>'data'</tt>.\r
96      */\r
97     \r
98     <div id="cfg-Ext.direct.RemotingProvider-enableBuffer"></div>/**\r
99      * @cfg {Number/Boolean} enableBuffer\r
100      * <p><tt>true</tt> or <tt>false</tt> to enable or disable combining of method\r
101      * calls. If a number is specified this is the amount of time in milliseconds\r
102      * to wait before sending a batched request (defaults to <tt>10</tt>).</p>\r
103      * <br><p>Calls which are received within the specified timeframe will be\r
104      * concatenated together and sent in a single request, optimizing the\r
105      * application by reducing the amount of round trips that have to be made\r
106      * to the server.</p>\r
107      */\r
108     enableBuffer: 10,\r
109     \r
110     <div id="cfg-Ext.direct.RemotingProvider-maxRetries"></div>/**\r
111      * @cfg {Number} maxRetries\r
112      * Number of times to re-attempt delivery on failure of a call. Defaults to <tt>1</tt>.\r
113      */\r
114     maxRetries: 1,\r
115     \r
116     <div id="cfg-Ext.direct.RemotingProvider-timeout"></div>/**\r
117      * @cfg {Number} timeout\r
118      * The timeout to use for each request. Defaults to <tt>undefined</tt>.\r
119      */\r
120     timeout: undefined,\r
121 \r
122     constructor : function(config){\r
123         Ext.direct.RemotingProvider.superclass.constructor.call(this, config);\r
124         this.addEvents(\r
125             <div id="event-Ext.direct.RemotingProvider-beforecall"></div>/**\r
126              * @event beforecall\r
127              * Fires immediately before the client-side sends off the RPC call.\r
128              * By returning false from an event handler you can prevent the call from\r
129              * executing.\r
130              * @param {Ext.direct.RemotingProvider} provider\r
131              * @param {Ext.Direct.Transaction} transaction\r
132              */            \r
133             'beforecall',            \r
134             <div id="event-Ext.direct.RemotingProvider-call"></div>/**\r
135              * @event call\r
136              * Fires immediately after the request to the server-side is sent. This does\r
137              * NOT fire after the response has come back from the call.\r
138              * @param {Ext.direct.RemotingProvider} provider\r
139              * @param {Ext.Direct.Transaction} transaction\r
140              */            \r
141             'call'\r
142         );\r
143         this.namespace = (Ext.isString(this.namespace)) ? Ext.ns(this.namespace) : this.namespace || window;\r
144         this.transactions = {};\r
145         this.callBuffer = [];\r
146     },\r
147 \r
148     // private\r
149     initAPI : function(){\r
150         var o = this.actions;\r
151         for(var c in o){\r
152             var cls = this.namespace[c] || (this.namespace[c] = {}),\r
153                 ms = o[c];\r
154             for(var i = 0, len = ms.length; i < len; i++){\r
155                 var m = ms[i];\r
156                 cls[m.name] = this.createMethod(c, m);\r
157             }\r
158         }\r
159     },\r
160 \r
161     // inherited\r
162     isConnected: function(){\r
163         return !!this.connected;\r
164     },\r
165 \r
166     connect: function(){\r
167         if(this.url){\r
168             this.initAPI();\r
169             this.connected = true;\r
170             this.fireEvent('connect', this);\r
171         }else if(!this.url){\r
172             throw 'Error initializing RemotingProvider, no url configured.';\r
173         }\r
174     },\r
175 \r
176     disconnect: function(){\r
177         if(this.connected){\r
178             this.connected = false;\r
179             this.fireEvent('disconnect', this);\r
180         }\r
181     },\r
182 \r
183     onData: function(opt, success, xhr){\r
184         if(success){\r
185             var events = this.getEvents(xhr);\r
186             for(var i = 0, len = events.length; i < len; i++){\r
187                 var e = events[i],\r
188                     t = this.getTransaction(e);\r
189                 this.fireEvent('data', this, e);\r
190                 if(t){\r
191                     this.doCallback(t, e, true);\r
192                     Ext.Direct.removeTransaction(t);\r
193                 }\r
194             }\r
195         }else{\r
196             var ts = [].concat(opt.ts);\r
197             for(var i = 0, len = ts.length; i < len; i++){\r
198                 var t = this.getTransaction(ts[i]);\r
199                 if(t && t.retryCount < this.maxRetries){\r
200                     t.retry();\r
201                 }else{\r
202                     var e = new Ext.Direct.ExceptionEvent({\r
203                         data: e,\r
204                         transaction: t,\r
205                         code: Ext.Direct.exceptions.TRANSPORT,\r
206                         message: 'Unable to connect to the server.',\r
207                         xhr: xhr\r
208                     });\r
209                     this.fireEvent('data', this, e);\r
210                     if(t){\r
211                         this.doCallback(t, e, false);\r
212                         Ext.Direct.removeTransaction(t);\r
213                     }\r
214                 }\r
215             }\r
216         }\r
217     },\r
218 \r
219     getCallData: function(t){\r
220         return {\r
221             action: t.action,\r
222             method: t.method,\r
223             data: t.data,\r
224             type: 'rpc',\r
225             tid: t.tid\r
226         };\r
227     },\r
228 \r
229     doSend : function(data){\r
230         var o = {\r
231             url: this.url,\r
232             callback: this.onData,\r
233             scope: this,\r
234             ts: data,\r
235             timeout: this.timeout\r
236         }, callData;\r
237 \r
238         if(Ext.isArray(data)){\r
239             callData = [];\r
240             for(var i = 0, len = data.length; i < len; i++){\r
241                 callData.push(this.getCallData(data[i]));\r
242             }\r
243         }else{\r
244             callData = this.getCallData(data);\r
245         }\r
246 \r
247         if(this.enableUrlEncode){\r
248             var params = {};\r
249             params[Ext.isString(this.enableUrlEncode) ? this.enableUrlEncode : 'data'] = Ext.encode(callData);\r
250             o.params = params;\r
251         }else{\r
252             o.jsonData = callData;\r
253         }\r
254         Ext.Ajax.request(o);\r
255     },\r
256 \r
257     combineAndSend : function(){\r
258         var len = this.callBuffer.length;\r
259         if(len > 0){\r
260             this.doSend(len == 1 ? this.callBuffer[0] : this.callBuffer);\r
261             this.callBuffer = [];\r
262         }\r
263     },\r
264 \r
265     queueTransaction: function(t){\r
266         if(t.form){\r
267             this.processForm(t);\r
268             return;\r
269         }\r
270         this.callBuffer.push(t);\r
271         if(this.enableBuffer){\r
272             if(!this.callTask){\r
273                 this.callTask = new Ext.util.DelayedTask(this.combineAndSend, this);\r
274             }\r
275             this.callTask.delay(Ext.isNumber(this.enableBuffer) ? this.enableBuffer : 10);\r
276         }else{\r
277             this.combineAndSend();\r
278         }\r
279     },\r
280 \r
281     doCall : function(c, m, args){\r
282         var data = null, hs = args[m.len], scope = args[m.len+1];\r
283 \r
284         if(m.len !== 0){\r
285             data = args.slice(0, m.len);\r
286         }\r
287 \r
288         var t = new Ext.Direct.Transaction({\r
289             provider: this,\r
290             args: args,\r
291             action: c,\r
292             method: m.name,\r
293             data: data,\r
294             cb: scope && Ext.isFunction(hs) ? hs.createDelegate(scope) : hs\r
295         });\r
296 \r
297         if(this.fireEvent('beforecall', this, t) !== false){\r
298             Ext.Direct.addTransaction(t);\r
299             this.queueTransaction(t);\r
300             this.fireEvent('call', this, t);\r
301         }\r
302     },\r
303 \r
304     doForm : function(c, m, form, callback, scope){\r
305         var t = new Ext.Direct.Transaction({\r
306             provider: this,\r
307             action: c,\r
308             method: m.name,\r
309             args:[form, callback, scope],\r
310             cb: scope && Ext.isFunction(callback) ? callback.createDelegate(scope) : callback,\r
311             isForm: true\r
312         });\r
313 \r
314         if(this.fireEvent('beforecall', this, t) !== false){\r
315             Ext.Direct.addTransaction(t);\r
316             var isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data',\r
317                 params = {\r
318                     extTID: t.tid,\r
319                     extAction: c,\r
320                     extMethod: m.name,\r
321                     extType: 'rpc',\r
322                     extUpload: String(isUpload)\r
323                 };\r
324             \r
325             // change made from typeof callback check to callback.params\r
326             // to support addl param passing in DirectSubmit EAC 6/2\r
327             Ext.apply(t, {\r
328                 form: Ext.getDom(form),\r
329                 isUpload: isUpload,\r
330                 params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params\r
331             });\r
332             this.fireEvent('call', this, t);\r
333             this.processForm(t);\r
334         }\r
335     },\r
336     \r
337     processForm: function(t){\r
338         Ext.Ajax.request({\r
339             url: this.url,\r
340             params: t.params,\r
341             callback: this.onData,\r
342             scope: this,\r
343             form: t.form,\r
344             isUpload: t.isUpload,\r
345             ts: t\r
346         });\r
347     },\r
348 \r
349     createMethod : function(c, m){\r
350         var f;\r
351         if(!m.formHandler){\r
352             f = function(){\r
353                 this.doCall(c, m, Array.prototype.slice.call(arguments, 0));\r
354             }.createDelegate(this);\r
355         }else{\r
356             f = function(form, callback, scope){\r
357                 this.doForm(c, m, form, callback, scope);\r
358             }.createDelegate(this);\r
359         }\r
360         f.directCfg = {\r
361             action: c,\r
362             method: m\r
363         };\r
364         return f;\r
365     },\r
366 \r
367     getTransaction: function(opt){\r
368         return opt && opt.tid ? Ext.Direct.getTransaction(opt.tid) : null;\r
369     },\r
370 \r
371     doCallback: function(t, e){\r
372         var fn = e.status ? 'success' : 'failure';\r
373         if(t && t.cb){\r
374             var hs = t.cb,\r
375                 result = Ext.isDefined(e.result) ? e.result : e.data;\r
376             if(Ext.isFunction(hs)){\r
377                 hs(result, e);\r
378             } else{\r
379                 Ext.callback(hs[fn], hs.scope, [result, e]);\r
380                 Ext.callback(hs.callback, hs.scope, [result, e]);\r
381             }\r
382         }\r
383     }\r
384 });\r
385 Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;</pre>
386 </body>
387 </html>