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.2.1
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.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>