Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / Observable-more.html
index 341c052..2bd2141 100644 (file)
@@ -1,11 +1,17 @@
-<html>\r
-<head>\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
+<html>
+<head>
+  <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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**\r
  * @class Ext.util.Observable\r
  */\r
 Ext.apply(Ext.util.Observable.prototype, function(){    \r
@@ -123,21 +129,56 @@ Ext.apply(Ext.util.Observable.prototype, function(){
         },\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'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'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 {Object} events The event name to bubble, or an Array of event names.\r
          */\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
@@ -176,6 +217,6 @@ Ext.util.Observable.observeClass = function(c){
         return (c.fireEvent.apply(c, arguments) !== false) &&\r
         (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false);\r
     };\r
-};</pre>    \r
-</body>\r
+};</pre>
+</body>
 </html>
\ No newline at end of file