3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
9 * @extends Ext.util.Observable
\r
10 * <p><b><u>Overview</u></b></p>
\r
12 * <p>Ext.Direct aims to streamline communication between the client and server
\r
13 * by providing a single interface that reduces the amount of common code
\r
14 * typically required to validate data and handle returned data packets
\r
15 * (reading data, error conditions, etc).</p>
\r
17 * <p>The Ext.direct namespace includes several classes for a closer integration
\r
18 * with the server-side. The Ext.data namespace also includes classes for working
\r
19 * with Ext.data.Stores which are backed by data from an Ext.Direct method.</p>
\r
21 * <p><b><u>Specification</u></b></p>
\r
23 * <p>For additional information consult the
\r
24 * <a href="http://extjs.com/products/extjs/direct.php">Ext.Direct Specification</a>.</p>
\r
26 * <p><b><u>Providers</u></b></p>
\r
28 * <p>Ext.Direct uses a provider architecture, where one or more providers are
\r
29 * used to transport data to and from the server. There are several providers
\r
30 * that exist in the core at the moment:</p><div class="mdetail-params"><ul>
\r
32 * <li>{@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations</li>
\r
33 * <li>{@link Ext.direct.PollingProvider PollingProvider} for repeated requests</li>
\r
34 * <li>{@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
\r
35 * on the client.</li>
\r
38 * <p>A provider does not need to be invoked directly, providers are added via
\r
39 * {@link Ext.Direct}.{@link Ext.Direct#add add}.</p>
\r
41 * <p><b><u>Router</u></b></p>
\r
43 * <p>Ext.Direct utilizes a "router" on the server to direct requests from the client
\r
44 * to the appropriate server-side method. Because the Ext.Direct API is completely
\r
45 * platform-agnostic, you could completely swap out a Java based server solution
\r
46 * and replace it with one that uses C# without changing the client side JavaScript
\r
49 * <p><b><u>Server side events</u></b></p>
\r
51 * <p>Custom events from the server may be handled by the client by adding
\r
52 * listeners, for example:</p>
\r
54 {"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
\r
56 // add a handler for a 'message' event sent by the server
\r
57 Ext.Direct.on('message', function(e){
\r
58 out.append(String.format('<p><i>{0}</i></p>', e.data));
\r
59 out.el.scrollTo('t', 100000, true);
\r
64 Ext.Direct = Ext.extend(Ext.util.Observable, {
\r
66 * Each event type implements a getData() method. The default event types are:
\r
67 * <div class="mdetail-params"><ul>
\r
68 * <li><b><tt>event</tt></b> : Ext.Direct.Event</li>
\r
69 * <li><b><tt>exception</tt></b> : Ext.Direct.ExceptionEvent</li>
\r
70 * <li><b><tt>rpc</tt></b> : Ext.Direct.RemotingEvent</li>
\r
72 * @property eventTypes
\r
77 * Four types of possible exceptions which can occur:
\r
78 * <div class="mdetail-params"><ul>
\r
79 * <li><b><tt>Ext.Direct.exceptions.TRANSPORT</tt></b> : 'xhr'</li>
\r
80 * <li><b><tt>Ext.Direct.exceptions.PARSE</tt></b> : 'parse'</li>
\r
81 * <li><b><tt>Ext.Direct.exceptions.LOGIN</tt></b> : 'login'</li>
\r
82 * <li><b><tt>Ext.Direct.exceptions.SERVER</tt></b> : 'exception'</li>
\r
84 * @property exceptions
\r
95 constructor: function(){
\r
99 * Fires after an event.
\r
100 * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
\r
101 * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
\r
106 * Fires after an event exception.
\r
107 * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
\r
111 this.transactions = {};
\r
112 this.providers = {};
\r
116 * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
\r
117 * If the provider is not already connected, it will auto-connect.
\r
119 var pollProv = new Ext.direct.PollingProvider({
\r
120 url: 'php/poll2.php'
\r
123 Ext.Direct.addProvider(
\r
125 "type":"remoting", // create a {@link Ext.direct.RemotingProvider}
\r
126 "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
\r
127 "actions":{ // each property within the actions object represents a Class
\r
128 "TestAction":[ // array of methods within each server side Class
\r
130 "name":"doEcho", // name of method
\r
137 "formHandler":true, // handle form on server with Ext.Direct.Transaction
\r
141 "namespace":"myApplication",// namespace to create the Remoting Provider in
\r
143 type: 'polling', // create a {@link Ext.direct.PollingProvider}
\r
144 url: 'php/poll.php'
\r
146 pollProv // reference to previously created instance
\r
149 * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
\r
150 * or config object for a Provider) or any number of Provider descriptions as arguments. Each
\r
151 * Provider description instructs Ext.Direct how to create client-side stub methods.
\r
153 addProvider : function(provider){
\r
156 for(var i = 0, len = a.length; i < len; i++){
\r
157 this.addProvider(a[i]);
\r
162 // if provider has not already been instantiated
\r
163 if(!provider.events){
\r
164 provider = new Ext.Direct.PROVIDERS[provider.type](provider);
\r
166 provider.id = provider.id || Ext.id();
\r
167 this.providers[provider.id] = provider;
\r
169 provider.on('data', this.onProviderData, this);
\r
170 provider.on('exception', this.onProviderException, this);
\r
173 if(!provider.isConnected()){
\r
174 provider.connect();
\r
181 * Retrieve a {@link Ext.direct.Provider provider} by the
\r
182 * <b><tt>{@link Ext.direct.Provider#id id}</tt></b> specified when the provider is
\r
183 * {@link #addProvider added}.
\r
184 * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider}
\r
186 getProvider : function(id){
\r
187 return this.providers[id];
\r
190 removeProvider : function(id){
\r
191 var provider = id.id ? id : this.providers[id.id];
\r
192 provider.un('data', this.onProviderData, this);
\r
193 provider.un('exception', this.onProviderException, this);
\r
194 delete this.providers[provider.id];
\r
198 addTransaction: function(t){
\r
199 this.transactions[t.tid] = t;
\r
203 removeTransaction: function(t){
\r
204 delete this.transactions[t.tid || t];
\r
208 getTransaction: function(tid){
\r
209 return this.transactions[tid.tid || tid];
\r
212 onProviderData : function(provider, e){
\r
213 if(Ext.isArray(e)){
\r
214 for(var i = 0, len = e.length; i < len; i++){
\r
215 this.onProviderData(provider, e[i]);
\r
219 if(e.name && e.name != 'event' && e.name != 'exception'){
\r
220 this.fireEvent(e.name, e);
\r
221 }else if(e.type == 'exception'){
\r
222 this.fireEvent('exception', e);
\r
224 this.fireEvent('event', e, provider);
\r
227 createEvent : function(response, extraProps){
\r
228 return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
\r
231 // overwrite impl. with static instance
\r
232 Ext.Direct = new Ext.Direct();
\r
234 Ext.Direct.TID = 1;
\r
235 Ext.Direct.PROVIDERS = {};