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