Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / Direct.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 <div id="cls-Ext.Direct"></div>/**
16  * @class Ext.Direct
17  * @extends Ext.util.Observable
18  * <p><b><u>Overview</u></b></p>
19  *
20  * <p>Ext.Direct aims to streamline communication between the client and server
21  * by providing a single interface that reduces the amount of common code
22  * typically required to validate data and handle returned data packets
23  * (reading data, error conditions, etc).</p>
24  *
25  * <p>The Ext.direct namespace includes several classes for a closer integration
26  * with the server-side. The Ext.data namespace also includes classes for working
27  * with Ext.data.Stores which are backed by data from an Ext.Direct method.</p>
28  *
29  * <p><b><u>Specification</u></b></p>
30  *
31  * <p>For additional information consult the
32  * <a href="http://extjs.com/products/extjs/direct.php">Ext.Direct Specification</a>.</p>
33  *
34  * <p><b><u>Providers</u></b></p>
35  *
36  * <p>Ext.Direct uses a provider architecture, where one or more providers are
37  * used to transport data to and from the server. There are several providers
38  * that exist in the core at the moment:</p><div class="mdetail-params"><ul>
39  *
40  * <li>{@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations</li>
41  * <li>{@link Ext.direct.PollingProvider PollingProvider} for repeated requests</li>
42  * <li>{@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
43  * on the client.</li>
44  * </ul></div>
45  *
46  * <p>A provider does not need to be invoked directly, providers are added via
47  * {@link Ext.Direct}.{@link Ext.Direct#add add}.</p>
48  *
49  * <p><b><u>Router</u></b></p>
50  *
51  * <p>Ext.Direct utilizes a "router" on the server to direct requests from the client
52  * to the appropriate server-side method. Because the Ext.Direct API is completely
53  * platform-agnostic, you could completely swap out a Java based server solution
54  * and replace it with one that uses C# without changing the client side JavaScript
55  * at all.</p>
56  *
57  * <p><b><u>Server side events</u></b></p>
58  *
59  * <p>Custom events from the server may be handled by the client by adding
60  * listeners, for example:</p>
61  * <pre><code>
62 {"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
63
64 // add a handler for a 'message' event sent by the server
65 Ext.Direct.on('message', function(e){
66     out.append(String.format('&lt;p>&lt;i>{0}&lt;/i>&lt;/p>', e.data));
67             out.el.scrollTo('t', 100000, true);
68 });
69  * </code></pre>
70  * @singleton
71  */
72 Ext.Direct = Ext.extend(Ext.util.Observable, {
73     <div id="prop-Ext.Direct-eventTypes"></div>/**
74      * Each event type implements a getData() method. The default event types are:
75      * <div class="mdetail-params"><ul>
76      * <li><b><tt>event</tt></b> : Ext.Direct.Event</li>
77      * <li><b><tt>exception</tt></b> : Ext.Direct.ExceptionEvent</li>
78      * <li><b><tt>rpc</tt></b> : Ext.Direct.RemotingEvent</li>
79      * </ul></div>
80      * @property eventTypes
81      * @type Object
82      */
83
84     <div id="prop-Ext.Direct-exceptions"></div>/**
85      * Four types of possible exceptions which can occur:
86      * <div class="mdetail-params"><ul>
87      * <li><b><tt>Ext.Direct.exceptions.TRANSPORT</tt></b> : 'xhr'</li>
88      * <li><b><tt>Ext.Direct.exceptions.PARSE</tt></b> : 'parse'</li>
89      * <li><b><tt>Ext.Direct.exceptions.LOGIN</tt></b> : 'login'</li>
90      * <li><b><tt>Ext.Direct.exceptions.SERVER</tt></b> : 'exception'</li>
91      * </ul></div>
92      * @property exceptions
93      * @type Object
94      */
95     exceptions: {
96         TRANSPORT: 'xhr',
97         PARSE: 'parse',
98         LOGIN: 'login',
99         SERVER: 'exception'
100     },
101
102     // private
103     constructor: function(){
104         this.addEvents(
105             <div id="event-Ext.Direct-event"></div>/**
106              * @event event
107              * Fires after an event.
108              * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
109              * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
110              */
111             'event',
112             <div id="event-Ext.Direct-exception"></div>/**
113              * @event exception
114              * Fires after an event exception.
115              * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
116              */
117             'exception'
118         );
119         this.transactions = {};
120         this.providers = {};
121     },
122
123     <div id="method-Ext.Direct-addProvider"></div>/**
124      * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
125      * If the provider is not already connected, it will auto-connect.
126      * <pre><code>
127 var pollProv = new Ext.direct.PollingProvider({
128     url: 'php/poll2.php'
129 });
130
131 Ext.Direct.addProvider(
132     {
133         "type":"remoting",       // create a {@link Ext.direct.RemotingProvider}
134         "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
135         "actions":{              // each property within the actions object represents a Class
136             "TestAction":[       // array of methods within each server side Class
137             {
138                 "name":"doEcho", // name of method
139                 "len":1
140             },{
141                 "name":"multiply",
142                 "len":1
143             },{
144                 "name":"doForm",
145                 "formHandler":true, // handle form on server with Ext.Direct.Transaction
146                 "len":1
147             }]
148         },
149         "namespace":"myApplication",// namespace to create the Remoting Provider in
150     },{
151         type: 'polling', // create a {@link Ext.direct.PollingProvider}
152         url:  'php/poll.php'
153     },
154     pollProv // reference to previously created instance
155 );
156      * </code></pre>
157      * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
158      * or config object for a Provider) or any number of Provider descriptions as arguments.  Each
159      * Provider description instructs Ext.Direct how to create client-side stub methods.
160      */
161     addProvider : function(provider){
162         var a = arguments;
163         if(a.length > 1){
164             for(var i = 0, len = a.length; i < len; i++){
165                 this.addProvider(a[i]);
166             }
167             return;
168         }
169
170         // if provider has not already been instantiated
171         if(!provider.events){
172             provider = new Ext.Direct.PROVIDERS[provider.type](provider);
173         }
174         provider.id = provider.id || Ext.id();
175         this.providers[provider.id] = provider;
176
177         provider.on('data', this.onProviderData, this);
178         provider.on('exception', this.onProviderException, this);
179
180
181         if(!provider.isConnected()){
182             provider.connect();
183         }
184
185         return provider;
186     },
187
188     <div id="method-Ext.Direct-getProvider"></div>/**
189      * Retrieve a {@link Ext.direct.Provider provider} by the
190      * <b><tt>{@link Ext.direct.Provider#id id}</tt></b> specified when the provider is
191      * {@link #addProvider added}.
192      * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider}
193      */
194     getProvider : function(id){
195         return this.providers[id];
196     },
197
198     removeProvider : function(id){
199         var provider = id.id ? id : this.providers[id];
200         provider.un('data', this.onProviderData, this);
201         provider.un('exception', this.onProviderException, this);
202         delete this.providers[provider.id];
203         return provider;
204     },
205
206     addTransaction: function(t){
207         this.transactions[t.tid] = t;
208         return t;
209     },
210
211     removeTransaction: function(t){
212         delete this.transactions[t.tid || t];
213         return t;
214     },
215
216     getTransaction: function(tid){
217         return this.transactions[tid.tid || tid];
218     },
219
220     onProviderData : function(provider, e){
221         if(Ext.isArray(e)){
222             for(var i = 0, len = e.length; i < len; i++){
223                 this.onProviderData(provider, e[i]);
224             }
225             return;
226         }
227         if(e.name && e.name != 'event' && e.name != 'exception'){
228             this.fireEvent(e.name, e);
229         }else if(e.type == 'exception'){
230             this.fireEvent('exception', e);
231         }
232         this.fireEvent('event', e, provider);
233     },
234
235     createEvent : function(response, extraProps){
236         return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
237     }
238 });
239 // overwrite impl. with static instance
240 Ext.Direct = new Ext.Direct();
241
242 Ext.Direct.TID = 1;
243 Ext.Direct.PROVIDERS = {};</pre>    
244 </body>
245 </html>