Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / Observable-more.html
index 341c052..04b17ea 100644 (file)
@@ -1,35 +1,36 @@
 <html>\r
 <head>\r
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   <title>The source code</title>\r
     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
 </head>\r
 <body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js">/**\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.util.Observable"></div>/**\r
  * @class Ext.util.Observable\r
  */\r
-Ext.apply(Ext.util.Observable.prototype, function(){    \r
+Ext.apply(Ext.util.Observable.prototype, function(){\r
     // this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)\r
     // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call\r
     // private\r
     function getMethodEvent(method){\r
         var e = (this.methodEvents = this.methodEvents ||\r
         {})[method], returnValue, v, cancel, obj = this;\r
-        \r
+\r
         if (!e) {\r
             this.methodEvents[method] = e = {};\r
             e.originalFn = this[method];\r
             e.methodName = method;\r
             e.before = [];\r
             e.after = [];\r
-            \r
+\r
             var makeCall = function(fn, scope, args){\r
                 if (!Ext.isEmpty(v = fn.apply(scope || obj, args))) {\r
                     if (Ext.isObject(v)) {\r
                         returnValue = !Ext.isEmpty(v.returnValue) ? v.returnValue : v;\r
                         cancel = !!v.cancel;\r
                     }\r
-                    else \r
+                    else\r
                         if (v === false) {\r
                             cancel = true;\r
                         }\r
@@ -38,19 +39,19 @@ Ext.apply(Ext.util.Observable.prototype, function(){
                         }\r
                 }\r
             };\r
-            \r
+\r
             this[method] = function(){\r
                 var args = Ext.toArray(arguments);\r
                 returnValue = v = undefined;\r
                 cancel = false;\r
-                \r
+\r
                 Ext.each(e.before, function(b){\r
                     makeCall(b.fn, b.scope, args);\r
                     if (cancel) {\r
                         return returnValue;\r
                     }\r
                 });\r
-                \r
+\r
                 if (!Ext.isEmpty(v = e.originalFn.apply(obj, args))) {\r
                     returnValue = v;\r
                 }\r
@@ -65,26 +66,26 @@ Ext.apply(Ext.util.Observable.prototype, function(){
         }\r
         return e;\r
     }\r
-    \r
+\r
     return {\r
         // these are considered experimental\r
         // allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call\r
-        // adds an "interceptor" called before the original method\r
-        beforeMethod: function(method, fn, scope){\r
+        // adds an 'interceptor' called before the original method\r
+        beforeMethod : function(method, fn, scope){\r
             getMethodEvent.call(this, method).before.push({\r
                 fn: fn,\r
                 scope: scope\r
             });\r
         },\r
-        \r
-        // adds a "sequence" called after the original method\r
-        afterMethod: function(method, fn, scope){\r
+\r
+        // adds a 'sequence' called after the original method\r
+        afterMethod : function(method, fn, scope){\r
             getMethodEvent.call(this, method).after.push({\r
                 fn: fn,\r
                 scope: scope\r
             });\r
         },\r
-        \r
+\r
         removeMethodListener: function(method, fn, scope){\r
             var e = getMethodEvent.call(this, method), found = false;\r
             Ext.each(e.before, function(b, i, arr){\r
@@ -103,13 +104,13 @@ Ext.apply(Ext.util.Observable.prototype, function(){
                 });\r
             }\r
         },\r
-        \r
+\r
         <div id="method-Ext.util.Observable-relayEvents"></div>/**\r
          * Relays selected events from the specified Observable as if the events were fired by <tt><b>this</b></tt>.\r
          * @param {Object} o The Observable whose events this object is to relay.\r
          * @param {Array} events Array of event names to relay.\r
          */\r
-        relayEvents: function(o, events){\r
+        relayEvents : function(o, events){\r
             var me = this;\r
             function createHandler(ename){\r
                 return function(){\r
@@ -121,23 +122,58 @@ Ext.apply(Ext.util.Observable.prototype, function(){
                 o.on(ename, createHandler(ename), me);\r
             });\r
         },\r
-        \r
+\r
         <div id="method-Ext.util.Observable-enableBubble"></div>/**\r
-         * Used to enable bubbling of events\r
-         * @param {Object} events\r
+         * <p>Enables events fired by this Observable to bubble up an owner hierarchy by calling\r
+         * <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class.</p>\r
+         * <p>This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component.getBubbleTarget}. The default\r
+         * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\r
+         * access the required target more quickly.</p>\r
+         * <p>Example:</p><pre><code>\r
+Ext.override(Ext.form.Field, {\r
+    //  Add functionality to Field&#39;s initComponent to enable the change event to bubble\r
+    initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {\r
+        this.enableBubble('change');\r
+    }),\r
+\r
+    //  We know that we want Field&#39;s events to bubble directly to the FormPanel.\r
+    getBubbleTarget : function() {\r
+        if (!this.formPanel) {\r
+            this.formPanel = this.findParentByType('form');\r
+        }\r
+        return this.formPanel;\r
+    }\r
+});\r
+\r
+var myForm = new Ext.formPanel({\r
+    title: 'User Details',\r
+    items: [{\r
+        ...\r
+    }],\r
+    listeners: {\r
+        change: function() {\r
+            // Title goes red if form has been modified.\r
+            myForm.header.setStyle('color', 'red');\r
+        }\r
+    }\r
+});\r
+</code></pre>\r
+         * @param {String/Array} events The event name to bubble, or an Array of event names.\r
          */\r
-        enableBubble: function(events){\r
+        enableBubble : function(events){\r
             var me = this;\r
-            events = Ext.isArray(events) ? events : Ext.toArray(arguments);\r
-            Ext.each(events, function(ename){\r
-                ename = ename.toLowerCase();\r
-                var ce = me.events[ename] || true;\r
-                if (typeof ce == "boolean") {\r
-                    ce = new Ext.util.Event(me, ename);\r
-                    me.events[ename] = ce;\r
-                }\r
-                ce.bubble = true;\r
-            });\r
+            if(!Ext.isEmpty(events)){\r
+                events = Ext.isArray(events) ? events : Ext.toArray(arguments);\r
+                Ext.each(events, function(ename){\r
+                    ename = ename.toLowerCase();\r
+                    var ce = me.events[ename] || true;\r
+                    if (Ext.isBoolean(ce)) {\r
+                        ce = new Ext.util.Event(me, ename);\r
+                        me.events[ename] = ce;\r
+                    }\r
+                    ce.bubble = true;\r
+                });\r
+            }\r
         }\r
     };\r
 }());\r
@@ -148,9 +184,9 @@ Ext.apply(Ext.util.Observable.prototype, function(){
  * to the supplied function with the event name + standard signature of the event\r
  * <b>before</b> the event is fired. If the supplied function returns false,\r
  * the event will not fire.\r
- * @param {Observable} o The Observable to capture\r
- * @param {Function} fn The function to call\r
- * @param {Object} scope (optional) The scope (this object) for the fn\r
+ * @param {Observable} o The Observable to capture events from.\r
+ * @param {Function} fn The function to call when an event is fired.\r
+ * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the Observable firing the event.\r
  * @static\r
  */\r
 Ext.util.Observable.capture = function(o, fn, scope){\r
@@ -165,17 +201,23 @@ Ext.util.Observable.capture = function(o, fn, scope){
  * <p>Usage:</p><pre><code>\r
 Ext.util.Observable.observeClass(Ext.data.Connection);\r
 Ext.data.Connection.on('beforerequest', function(con, options) {\r
-    console.log("Ajax request made to " + options.url);\r
+    console.log('Ajax request made to ' + options.url);\r
 });</code></pre>\r
  * @param {Function} c The class constructor to make observable.\r
+ * @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}. \r
  * @static\r
  */\r
-Ext.util.Observable.observeClass = function(c){\r
-    Ext.apply(c, new Ext.util.Observable());\r
-    c.prototype.fireEvent = function(){\r
-        return (c.fireEvent.apply(c, arguments) !== false) &&\r
-        (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false);\r
-    };\r
+Ext.util.Observable.observeClass = function(c, listeners){\r
+    if(c){\r
+      if(!c.fireEvent){\r
+          Ext.apply(c, new Ext.util.Observable());\r
+          Ext.util.Observable.capture(c.prototype, c.fireEvent, c);\r
+      }\r
+      if(Ext.isObject(listeners)){\r
+          c.on(listeners);\r
+      }\r
+      return c;\r
+   }\r
 };</pre>    \r
 </body>\r
 </html>
\ No newline at end of file