Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Direct.html
index edbb587..c53209d 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.Direct"></div>/**
- * @class Ext.Direct
- * @extends Ext.util.Observable
- * <p><b><u>Overview</u></b></p>
- *
- * <p>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).</p>
- *
- * <p>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.</p>
- *
- * <p><b><u>Specification</u></b></p>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-data-proxy-Direct'>/**
+</span> * This class is used to send requests to the server using {@link Ext.direct.Manager Ext.Direct}. When a
+ * request is made, the transport mechanism is handed off to the appropriate
+ * {@link Ext.direct.RemotingProvider Provider} to complete the call.
  *
- * <p>For additional information consult the
- * <a href="http://extjs.com/products/extjs/direct.php">Ext.Direct Specification</a>.</p>
+ * # Specifying the function
  *
- * <p><b><u>Providers</u></b></p>
+ * This proxy expects a Direct remoting method to be passed in order to be able to complete requests.
+ * This can be done by specifying the {@link #directFn} configuration. This will use the same direct
+ * method for all requests. Alternatively, you can provide an {@link #api} configuration. This
+ * allows you to specify a different remoting method for each CRUD action.
  *
- * <p>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:</p><div class="mdetail-params"><ul>
+ * # Parameters
  *
- * <li>{@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations</li>
- * <li>{@link Ext.direct.PollingProvider PollingProvider} for repeated requests</li>
- * <li>{@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
- * on the client.</li>
- * </ul></div>
+ * This proxy provides options to help configure which parameters will be sent to the server.
+ * By specifying the {@link #paramsAsHash} option, it will send an object literal containing each
+ * of the passed parameters. The {@link #paramOrder} option can be used to specify the order in which
+ * the remoting method parameters are passed.
  *
- * <p>A provider does not need to be invoked directly, providers are added via
- * {@link Ext.Direct}.{@link Ext.Direct#add add}.</p>
+ * # Example Usage
  *
- * <p><b><u>Router</u></b></p>
- *
- * <p>Ext.Direct utilizes a "router" 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.</p>
- *
- * <p><b><u>Server side events</u></b></p>
- *
- * <p>Custom events from the server may be handled by the client by adding
- * listeners, for example:</p>
- * <pre><code>
-{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
-
-// add a handler for a 'message' event sent by the server
-Ext.Direct.on('message', function(e){
-    out.append(String.format('&lt;p>&lt;i>{0}&lt;/i>&lt;/p>', e.data));
-            out.el.scrollTo('t', 100000, true);
-});
- * </code></pre>
- * @singleton
+ *     Ext.define('User', {
+ *         extend: 'Ext.data.Model',
+ *         fields: ['firstName', 'lastName'],
+ *         proxy: {
+ *             type: 'direct',
+ *             directFn: MyApp.getUsers,
+ *             paramOrder: 'id' // Tells the proxy to pass the id as the first parameter to the remoting method.
+ *         }
+ *     });
+ *     User.load(1);
  */
-Ext.Direct = Ext.extend(Ext.util.Observable, {
-    <div id="prop-Ext.Direct-eventTypes"></div>/**
-     * Each event type implements a getData() method. The default event types are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>event</tt></b> : Ext.Direct.Event</li>
-     * <li><b><tt>exception</tt></b> : Ext.Direct.ExceptionEvent</li>
-     * <li><b><tt>rpc</tt></b> : Ext.Direct.RemotingEvent</li>
-     * </ul></div>
-     * @property eventTypes
-     * @type Object
+Ext.define('Ext.data.proxy.Direct', {
+    /* Begin Definitions */
+
+    extend: 'Ext.data.proxy.Server',
+    alternateClassName: 'Ext.data.DirectProxy',
+
+    alias: 'proxy.direct',
+
+    requires: ['Ext.direct.Manager'],
+
+    /* End Definitions */
+
+<span id='Ext-data-proxy-Direct-cfg-paramOrder'>    /**
+</span>     * @cfg {String/String[]} paramOrder
+     * Defaults to undefined. A list of params to be executed server side.  Specify the params in the order in
+     * which they must be executed on the server-side as either (1) an Array of String values, or (2) a String
+     * of params delimited by either whitespace, comma, or pipe. For example, any of the following would be
+     * acceptable:
+     *
+     *     paramOrder: ['param1','param2','param3']
+     *     paramOrder: 'param1 param2 param3'
+     *     paramOrder: 'param1,param2,param3'
+     *     paramOrder: 'param1|param2|param'
      */
+    paramOrder: undefined,
 
-    <div id="prop-Ext.Direct-exceptions"></div>/**
-     * Four types of possible exceptions which can occur:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>Ext.Direct.exceptions.TRANSPORT</tt></b> : 'xhr'</li>
-     * <li><b><tt>Ext.Direct.exceptions.PARSE</tt></b> : 'parse'</li>
-     * <li><b><tt>Ext.Direct.exceptions.LOGIN</tt></b> : 'login'</li>
-     * <li><b><tt>Ext.Direct.exceptions.SERVER</tt></b> : 'exception'</li>
-     * </ul></div>
-     * @property exceptions
-     * @type Object
+<span id='Ext-data-proxy-Direct-cfg-paramsAsHash'>    /**
+</span>     * @cfg {Boolean} paramsAsHash
+     * Send parameters as a collection of named arguments.
+     * Providing a {@link #paramOrder} nullifies this configuration.
      */
-    exceptions: {
-        TRANSPORT: 'xhr',
-        PARSE: 'parse',
-        LOGIN: 'login',
-        SERVER: 'exception'
-    },
+    paramsAsHash: true,
 
-    // private
-    constructor: function(){
-        this.addEvents(
-            <div id="event-Ext.Direct-event"></div>/**
-             * @event event
-             * Fires after an event.
-             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
-             * @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
-             */
-            'event',
-            <div id="event-Ext.Direct-exception"></div>/**
-             * @event exception
-             * Fires after an event exception.
-             * @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
-             */
-            'exception'
-        );
-        this.transactions = {};
-        this.providers = {};
-    },
+<span id='Ext-data-proxy-Direct-cfg-directFn'>    /**
+</span>     * @cfg {Function} directFn
+     * Function to call when executing a request.  directFn is a simple alternative to defining the api configuration-parameter
+     * for Store's which will not implement a full CRUD api.
+     */
+    directFn : undefined,
 
-    <div id="method-Ext.Direct-addProvider"></div>/**
-     * 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.
-     * <pre><code>
-var pollProv = new Ext.direct.PollingProvider({
-    url: 'php/poll2.php'
-});
+<span id='Ext-data-proxy-Direct-cfg-api'>    /**
+</span>     * @cfg {Object} api
+     * The same as {@link Ext.data.proxy.Server#api}, however instead of providing urls, you should provide a direct
+     * function call.
+     */
 
-Ext.Direct.addProvider(
-    {
-        "type":"remoting",       // create a {@link Ext.direct.RemotingProvider}
-        "url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
-        "actions":{              // each property within the actions object represents a Class
-            "TestAction":[       // array of methods within each server side Class
-            {
-                "name":"doEcho", // name of method
-                "len":1
-            },{
-                "name":"multiply",
-                "len":1
-            },{
-                "name":"doForm",
-                "formHandler":true, // handle form on server with Ext.Direct.Transaction
-                "len":1
-            }]
-        },
-        "namespace":"myApplication",// 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
-);
-     * </code></pre>
-     * @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.
+<span id='Ext-data-proxy-Direct-cfg-extraParams'>    /**
+</span>     * @cfg {Object} extraParams
+     * Extra parameters that will be included on every read request. Individual requests with params
+     * of the same name will override these params when they are in conflict.
      */
-    addProvider : function(provider){
-        var a = arguments;
-        if(a.length > 1){
-            for(var i = 0, len = a.length; i < len; i++){
-                this.addProvider(a[i]);
-            }
-            return;
-        }
 
-        // if provider has not already been instantiated
-        if(!provider.events){
-            provider = new Ext.Direct.PROVIDERS[provider.type](provider);
+    // private
+    paramOrderRe: /[\s,|]/,
+
+    constructor: function(config){
+        var me = this;
+
+        Ext.apply(me, config);
+        if (Ext.isString(me.paramOrder)) {
+            me.paramOrder = me.paramOrder.split(me.paramOrderRe);
         }
-        provider.id = provider.id || Ext.id();
-        this.providers[provider.id] = provider;
+        me.callParent(arguments);
+    },
 
-        provider.on('data', this.onProviderData, this);
-        provider.on('exception', this.onProviderException, this);
+    doRequest: function(operation, callback, scope) {
+        var me = this,
+            writer = me.getWriter(),
+            request = me.buildRequest(operation, callback, scope),
+            fn = me.api[request.action]  || me.directFn,
+            args = [],
+            params = request.params,
+            paramOrder = me.paramOrder,
+            method,
+            i = 0,
+            len;
+
+        //&lt;debug&gt;
+        if (!fn) {
+            Ext.Error.raise('No direct function specified for this proxy');
+        }
+        //&lt;/debug&gt;
 
+        if (operation.allowWrite()) {
+            request = writer.write(request);
+        }
 
-        if(!provider.isConnected()){
-            provider.connect();
+        if (operation.action == 'read') {
+            // We need to pass params
+            method = fn.directCfg.method;
+
+            if (method.ordered) {
+                if (method.len &gt; 0) {
+                    if (paramOrder) {
+                        for (len = paramOrder.length; i &lt; len; ++i) {
+                            args.push(params[paramOrder[i]]);
+                        }
+                    } else if (me.paramsAsHash) {
+                        args.push(params);
+                    }
+                }
+            } else {
+                args.push(params);
+            }
+        } else {
+            args.push(request.jsonData);
         }
 
-        return provider;
+        Ext.apply(request, {
+            args: args,
+            directFn: fn
+        });
+        args.push(me.createRequestCallback(request, operation, callback, scope), me);
+        fn.apply(window, args);
     },
 
-    <div id="method-Ext.Direct-getProvider"></div>/**
-     * Retrieve a {@link Ext.direct.Provider provider} by the
-     * <b><tt>{@link Ext.direct.Provider#id id}</tt></b> specified when the provider is
-     * {@link #addProvider added}.
-     * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider}
+    /*
+     * Inherit docs. We don't apply any encoding here because
+     * all of the direct requests go out as jsonData
      */
-    getProvider : function(id){
-        return this.providers[id];
+    applyEncoding: function(value){
+        return value;
     },
 
-    removeProvider : function(id){
-        var provider = id.id ? id : this.providers[id];
-        provider.un('data', this.onProviderData, this);
-        provider.un('exception', this.onProviderException, this);
-        delete this.providers[provider.id];
-        return provider;
-    },
+    createRequestCallback: function(request, operation, callback, scope){
+        var me = this;
 
-    addTransaction: function(t){
-        this.transactions[t.tid] = t;
-        return t;
+        return function(data, event){
+            me.processResponse(event.status, operation, request, event, callback, scope);
+        };
     },
 
-    removeTransaction: function(t){
-        delete this.transactions[t.tid || t];
-        return t;
+    // inherit docs
+    extractResponseData: function(response){
+        return Ext.isDefined(response.result) ? response.result : response.data;
     },
 
-    getTransaction: function(tid){
-        return this.transactions[tid.tid || tid];
+    // inherit docs
+    setException: function(operation, response) {
+        operation.setException(response.message);
     },
 
-    onProviderData : function(provider, e){
-        if(Ext.isArray(e)){
-            for(var i = 0, len = e.length; i < len; i++){
-                this.onProviderData(provider, e[i]);
-            }
-            return;
-        }
-        if(e.name && e.name != 'event' && e.name != 'exception'){
-            this.fireEvent(e.name, e);
-        }else if(e.type == 'exception'){
-            this.fireEvent('exception', e);
-        }
-        this.fireEvent('event', e, provider);
-    },
-
-    createEvent : function(response, extraProps){
-        return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
+    // inherit docs
+    buildUrl: function(){
+        return '';
     }
 });
-// overwrite impl. with static instance
-Ext.Direct = new Ext.Direct();
-
-Ext.Direct.TID = 1;
-Ext.Direct.PROVIDERS = {};</pre>    
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>