4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-direct-Manager'>/**
19 </span> * Ext.Direct aims to streamline communication between the client and server by providing a single interface that
20 * reduces the amount of common code typically required to validate data and handle returned data packets (reading data,
21 * error conditions, etc).
23 * The Ext.direct namespace includes several classes for a closer integration with the server-side. The Ext.data
24 * namespace also includes classes for working with Ext.data.Stores which are backed by data from an Ext.Direct method.
28 * For additional information consult the [Ext.Direct Specification][1].
32 * Ext.Direct uses a provider architecture, where one or more providers are used to transport data to and from the
33 * server. There are several providers that exist in the core at the moment:
35 * - {@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations
36 * - {@link Ext.direct.PollingProvider PollingProvider} for repeated requests
37 * - {@link Ext.direct.RemotingProvider RemotingProvider} exposes server side on the client.
39 * A provider does not need to be invoked directly, providers are added via {@link Ext.direct.Manager}.{@link #addProvider}.
43 * Ext.Direct utilizes a "router" on the server to direct requests from the client to the appropriate server-side
44 * method. Because the Ext.Direct API is completely platform-agnostic, you could completely swap out a Java based server
45 * solution and replace it with one that uses C# without changing the client side JavaScript at all.
47 * # Server side events
49 * Custom events from the server may be handled by the client by adding listeners, for example:
51 * {"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
53 * // add a handler for a 'message' event sent by the server
54 * Ext.direct.Manager.on('message', function(e){
55 * out.append(String.format('<p><i>{0}</i></p>', e.data));
56 * out.el.scrollTo('t', 100000, true);
59 * [1]: http://sencha.com/products/extjs/extdirect
62 * @alternateClassName Ext.Direct
64 Ext.define('Ext.direct.Manager', {
66 /* Begin Definitions */
70 observable: 'Ext.util.Observable'
73 requires: ['Ext.util.MixedCollection'],
86 constructor: function(){
90 <span id='Ext-direct-Manager-event-event'> /**
91 </span> * @event event
92 * Fires after an event.
93 * @param {Ext.direct.Event} e The Ext.direct.Event type that occurred.
94 * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
97 <span id='Ext-direct-Manager-event-exception'> /**
98 </span> * @event exception
99 * Fires after an event exception.
100 * @param {Ext.direct.Event} e The event type that occurred.
104 me.transactions = Ext.create('Ext.util.MixedCollection');
105 me.providers = Ext.create('Ext.util.MixedCollection');
107 me.mixins.observable.constructor.call(me);
110 <span id='Ext-direct-Manager-method-addProvider'> /**
111 </span> * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods. If the provider
112 * is not already connected, it will auto-connect.
114 * var pollProv = new Ext.direct.PollingProvider({
115 * url: 'php/poll2.php'
118 * Ext.direct.Manager.addProvider({
119 * "type":"remoting", // create a {@link Ext.direct.RemotingProvider}
120 * "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
121 * "actions":{ // each property within the actions object represents a Class
122 * "TestAction":[ // array of methods within each server side Class
124 * "name":"doEcho", // name of method
127 * "name":"multiply",
130 * "name":"doForm",
131 * "formHandler":true, // handle form on server with Ext.Direct.Transaction
135 * "namespace":"myApplication",// namespace to create the Remoting Provider in
137 * type: 'polling', // create a {@link Ext.direct.PollingProvider}
138 * url: 'php/poll.php'
139 * }, pollProv); // reference to previously created instance
141 * @param {Ext.direct.Provider/Object...} provider
142 * Accepts any number of Provider descriptions (an instance or config object for
143 * a Provider). Each Provider description instructs Ext.Directhow to create
144 * client-side stub methods.
146 addProvider : function(provider){
152 if (args.length > 1) {
153 for (len = args.length; i < len; ++i) {
154 me.addProvider(args[i]);
159 // if provider has not already been instantiated
160 if (!provider.isProvider) {
161 provider = Ext.create('direct.' + provider.type + 'provider', provider);
163 me.providers.add(provider);
164 provider.on('data', me.onProviderData, me);
167 if (!provider.isConnected()) {
174 <span id='Ext-direct-Manager-method-getProvider'> /**
175 </span> * Retrieves a {@link Ext.direct.Provider provider} by the **{@link Ext.direct.Provider#id id}** specified when the
176 * provider is {@link #addProvider added}.
177 * @param {String/Ext.direct.Provider} id The id of the provider, or the provider instance.
179 getProvider : function(id){
180 return id.isProvider ? id : this.providers.get(id);
183 <span id='Ext-direct-Manager-method-removeProvider'> /**
184 </span> * Removes the provider.
185 * @param {String/Ext.direct.Provider} provider The provider instance or the id of the provider.
186 * @return {Ext.direct.Provider} The provider, null if not found.
188 removeProvider : function(provider){
190 providers = me.providers;
192 provider = provider.isProvider ? provider : providers.get(provider);
195 provider.un('data', me.onProviderData, me);
196 providers.remove(provider);
202 <span id='Ext-direct-Manager-method-addTransaction'> /**
203 </span> * Adds a transaction to the manager.
205 * @param {Ext.direct.Transaction} transaction The transaction to add
206 * @return {Ext.direct.Transaction} transaction
208 addTransaction: function(transaction){
209 this.transactions.add(transaction);
213 <span id='Ext-direct-Manager-method-removeTransaction'> /**
214 </span> * Removes a transaction from the manager.
216 * @param {String/Ext.direct.Transaction} transaction The transaction/id of transaction to remove
217 * @return {Ext.direct.Transaction} transaction
219 removeTransaction: function(transaction){
220 transaction = this.getTransaction(transaction);
221 this.transactions.remove(transaction);
225 <span id='Ext-direct-Manager-method-getTransaction'> /**
226 </span> * Gets a transaction
228 * @param {String/Ext.direct.Transaction} transaction The transaction/id of transaction to get
229 * @return {Ext.direct.Transaction}
231 getTransaction: function(transaction){
232 return transaction.isTransaction ? transaction : this.transactions.get(transaction);
235 onProviderData : function(provider, event){
240 if (Ext.isArray(event)) {
241 for (len = event.length; i < len; ++i) {
242 me.onProviderData(provider, event[i]);
246 if (event.name && event.name != 'event' && event.name != 'exception') {
247 me.fireEvent(event.name, event);
248 } else if (event.status === false) {
249 me.fireEvent('exception', event);
251 me.fireEvent('event', event, provider);
254 // Backwards compatibility
255 Ext.Direct = Ext.direct.Manager;