Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / Manager4.html
index 24a69a7..2fa6b74 100644 (file)
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-state-Manager'>/**
-</span> * @class Ext.state.Manager
- * This is the global state manager. By default all components that are &quot;state aware&quot; check this class
- * for state information if you don't pass them a custom state provider. In order for this class
- * to be useful, it must be initialized with a provider when your application initializes. Example usage:
- &lt;pre&gt;&lt;code&gt;
-// in your initialization function
-init : function(){
-   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
-   var win = new Window(...);
-   win.restoreState();
-}
- &lt;/code&gt;&lt;/pre&gt;
- * This class passes on calls from components to the underlying {@link Ext.state.Provider} so that
- * there is a common interface that can be used without needing to refer to a specific provider instance
- * in every component.
+  <pre class="prettyprint lang-js"><span id='Ext-direct-Manager'>/**
+</span> * @class Ext.direct.Manager
+ * &lt;p&gt;&lt;b&gt;&lt;u&gt;Overview&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
+ *
+ * &lt;p&gt;Ext.Direct aims to streamline communication between the client and server
+ * by providing a single interface that reduces the amount of common code
+ * typically required to validate data and handle returned data packets
+ * (reading data, error conditions, etc).&lt;/p&gt;
+ *
+ * &lt;p&gt;The Ext.direct namespace includes several classes for a closer integration
+ * with the server-side. The Ext.data namespace also includes classes for working
+ * with Ext.data.Stores which are backed by data from an Ext.Direct method.&lt;/p&gt;
+ *
+ * &lt;p&gt;&lt;b&gt;&lt;u&gt;Specification&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
+ *
+ * &lt;p&gt;For additional information consult the
+ * &lt;a href=&quot;http://sencha.com/products/extjs/extdirect&quot;&gt;Ext.Direct Specification&lt;/a&gt;.&lt;/p&gt;
+ *
+ * &lt;p&gt;&lt;b&gt;&lt;u&gt;Providers&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
+ *
+ * &lt;p&gt;Ext.Direct uses a provider architecture, where one or more providers are
+ * used to transport data to and from the server. There are several providers
+ * that exist in the core at the moment:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+ *
+ * &lt;li&gt;{@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations&lt;/li&gt;
+ * &lt;li&gt;{@link Ext.direct.PollingProvider PollingProvider} for repeated requests&lt;/li&gt;
+ * &lt;li&gt;{@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
+ * on the client.&lt;/li&gt;
+ * &lt;/ul&gt;&lt;/div&gt;
+ *
+ * &lt;p&gt;A provider does not need to be invoked directly, providers are added via
+ * {@link Ext.direct.Manager}.{@link Ext.direct.Manager#addProvider addProvider}.&lt;/p&gt;
+ *
+ * &lt;p&gt;&lt;b&gt;&lt;u&gt;Router&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
+ *
+ * &lt;p&gt;Ext.Direct utilizes a &quot;router&quot; on the server to direct requests from the client
+ * to the appropriate server-side method. Because the Ext.Direct API is completely
+ * platform-agnostic, you could completely swap out a Java based server solution
+ * and replace it with one that uses C# without changing the client side JavaScript
+ * at all.&lt;/p&gt;
+ *
+ * &lt;p&gt;&lt;b&gt;&lt;u&gt;Server side events&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
+ *
+ * &lt;p&gt;Custom events from the server may be handled by the client by adding
+ * listeners, for example:&lt;/p&gt;
+ * &lt;pre&gt;&lt;code&gt;
+{&quot;type&quot;:&quot;event&quot;,&quot;name&quot;:&quot;message&quot;,&quot;data&quot;:&quot;Successfully polled at: 11:19:30 am&quot;}
+
+// add a handler for a 'message' event sent by the server
+Ext.direct.Manager.on('message', function(e){
+    out.append(String.format('&amp;lt;p&gt;&amp;lt;i&gt;{0}&amp;lt;/i&gt;&amp;lt;/p&gt;', e.data));
+            out.el.scrollTo('t', 100000, true);
+});
+ * &lt;/code&gt;&lt;/pre&gt;
  * @singleton
- * @docauthor Evan Trimboli &lt;evan@sencha.com&gt;
  */
-Ext.define('Ext.state.Manager', {
+
+Ext.define('Ext.direct.Manager', {
+    
+    /* Begin Definitions */
     singleton: true,
-    requires: ['Ext.state.Provider'],
-    constructor: function() {
-        this.provider = Ext.create('Ext.state.Provider');
+   
+    mixins: {
+        observable: 'Ext.util.Observable'
     },
     
+    requires: ['Ext.util.MixedCollection'],
     
-<span id='Ext-state-Manager-method-setProvider'>    /**
-</span>     * Configures the default state provider for your application
-     * @param {Provider} stateProvider The state provider to set
-     */
-    setProvider : function(stateProvider){
-        this.provider = stateProvider;
+    statics: {
+        exceptions: {
+            TRANSPORT: 'xhr',
+            PARSE: 'parse',
+            LOGIN: 'login',
+            SERVER: 'exception'
+        }
+    },
+    
+    /* End Definitions */
+   
+    constructor: function(){
+        var me = this;
+       
+        me.addEvents(
+<span id='Ext-direct-Manager-event-event'>            /**
+</span>             * @event event
+             * Fires after an event.
+             * @param {event} e The Ext.direct.Event type that occurred.
+             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
+             */
+            'event',
+<span id='Ext-direct-Manager-event-exception'>            /**
+</span>             * @event exception
+             * Fires after an event exception.
+             * @param {event} e The Ext.direct.Event type that occurred.
+             */
+            'exception'
+        );
+        me.transactions = Ext.create('Ext.util.MixedCollection');
+        me.providers = Ext.create('Ext.util.MixedCollection');
+        
+        me.mixins.observable.constructor.call(me);
     },
+    
+<span id='Ext-direct-Manager-method-addProvider'>    /**
+</span>     * Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
+     * If the provider is not already connected, it will auto-connect.
+     * &lt;pre&gt;&lt;code&gt;
+var pollProv = new Ext.direct.PollingProvider({
+    url: 'php/poll2.php'
+});
 
-<span id='Ext-state-Manager-method-get'>    /**
-</span>     * Returns the current value for a key
-     * @param {String} name The key name
-     * @param {Mixed} defaultValue The default value to return if the key lookup does not match
-     * @return {Mixed} The state data
-     */
-    get : function(key, defaultValue){
-        return this.provider.get(key, defaultValue);
+Ext.direct.Manager.addProvider({
+    &quot;type&quot;:&quot;remoting&quot;,       // create a {@link Ext.direct.RemotingProvider}
+    &quot;url&quot;:&quot;php\/router.php&quot;, // url to connect to the Ext.Direct server-side router.
+    &quot;actions&quot;:{              // each property within the actions object represents a Class
+        &quot;TestAction&quot;:[       // array of methods within each server side Class
+        {
+            &quot;name&quot;:&quot;doEcho&quot;, // name of method
+            &quot;len&quot;:1
+        },{
+            &quot;name&quot;:&quot;multiply&quot;,
+            &quot;len&quot;:1
+        },{
+            &quot;name&quot;:&quot;doForm&quot;,
+            &quot;formHandler&quot;:true, // handle form on server with Ext.Direct.Transaction
+            &quot;len&quot;:1
+        }]
     },
+    &quot;namespace&quot;:&quot;myApplication&quot;,// namespace to create the Remoting Provider in
+},{
+    type: 'polling', // create a {@link Ext.direct.PollingProvider}
+    url:  'php/poll.php'
+}, pollProv); // reference to previously created instance
+     * &lt;/code&gt;&lt;/pre&gt;
+     * @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
+     * or config object for a Provider) or any number of Provider descriptions as arguments.  Each
+     * Provider description instructs Ext.Direct how to create client-side stub methods.
+     */
+    addProvider : function(provider){
+        var me = this,
+            args = arguments,
+            i = 0,
+            len;
+            
+        if (args.length &gt; 1) {
+            for (len = args.length; i &lt; len; ++i) {
+                me.addProvider(args[i]);
+            }
+            return;
+        }
+
+        // if provider has not already been instantiated
+        if (!provider.isProvider) {
+            provider = Ext.create('direct.' + provider.type + 'provider', provider);
+        }
+        me.providers.add(provider);
+        provider.on('data', me.onProviderData, me);
+
 
-<span id='Ext-state-Manager-method-set'>    /**
-</span>     * Sets the value for a key
-     * @param {String} name The key name
-     * @param {Mixed} value The state data
+        if (!provider.isConnected()) {
+            provider.connect();
+        }
+
+        return provider;
+    },
+    
+<span id='Ext-direct-Manager-method-getProvider'>    /**
+</span>     * Retrieve a {@link Ext.direct.Provider provider} by the
+     * &lt;b&gt;&lt;tt&gt;{@link Ext.direct.Provider#id id}&lt;/tt&gt;&lt;/b&gt; specified when the provider is
+     * {@link #addProvider added}.
+     * @param {String/Ext.data.Provider} id The id of the provider, or the provider instance.
+     */
+    getProvider : function(id){
+        return id.isProvider ? id : this.providers.get(id);
+    },
+    
+<span id='Ext-direct-Manager-method-removeProvider'>    /**
+</span>     * Removes the provider.
+     * @param {String/Ext.direct.Provider} provider The provider instance or the id of the provider.
+     * @return {Ext.direct.Provider} The provider, null if not found.
      */
-     set : function(key, value){
-        this.provider.set(key, value);
+    removeProvider : function(provider){
+        var me = this,
+            providers = me.providers,
+            provider = provider.isProvider ? provider : providers.get(provider);
+            
+        if (provider) {
+            provider.un('data', me.onProviderData, me);
+            providers.remove(provider);
+            return provider;
+        }
+        return null;
+    },
+    
+<span id='Ext-direct-Manager-method-addTransaction'>    /**
+</span>     * Add a transaction to the manager.
+     * @private
+     * @param {Ext.direct.Transaction} transaction The transaction to add
+     * @return {Ext.direct.Transaction} transaction
+     */
+    addTransaction: function(transaction){
+        this.transactions.add(transaction);
+        return transaction;
     },
 
-<span id='Ext-state-Manager-method-clear'>    /**
-</span>     * Clears a value from the state
-     * @param {String} name The key name
+<span id='Ext-direct-Manager-method-removeTransaction'>    /**
+</span>     * Remove a transaction from the manager.
+     * @private
+     * @param {String/Ext.direct.Transaction} transaction The transaction/id of transaction to remove
+     * @return {Ext.direct.Transaction} transaction
      */
-    clear : function(key){
-        this.provider.clear(key);
+    removeTransaction: function(transaction){
+        transaction = this.getTransaction(transaction);
+        this.transactions.remove(transaction);
+        return transaction;
     },
 
-<span id='Ext-state-Manager-method-getProvider'>    /**
-</span>     * Gets the currently configured state provider
-     * @return {Provider} The state provider
+<span id='Ext-direct-Manager-method-getTransaction'>    /**
+</span>     * Gets a transaction
+     * @private
+     * @param {String/Ext.direct.Transaction} transaction The transaction/id of transaction to get
+     * @return {Ext.direct.Transaction}
      */
-    getProvider : function(){
-        return this.provider;
+    getTransaction: function(transaction){
+        return transaction.isTransaction ? transaction : this.transactions.get(transaction);
+    },
+    
+    onProviderData : function(provider, event){
+        var me = this,
+            i = 0,
+            len;
+            
+        if (Ext.isArray(event)) {
+            for (len = event.length; i &lt; len; ++i) {
+                me.onProviderData(provider, event[i]);
+            }
+            return;
+        }
+        if (event.name &amp;&amp; event.name != 'event' &amp;&amp; event.name != 'exception') {
+            me.fireEvent(event.name, event);
+        } else if (event.type == 'exception') {
+            me.fireEvent('exception', event);
+        }
+        me.fireEvent('event', event, provider);
     }
-});</pre>
+}, function(){
+    // Backwards compatibility
+    Ext.Direct = Ext.direct.Manager;
+});
+</pre>
 </body>
 </html>