<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
<pre class="prettyprint lang-js">/**\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
}\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
}\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
});\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
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'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 {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
* 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
* <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