[DONE] Class level observability

[Animal]

This would be an incredibly useful feature. To allow class level listeners for any event supported by a class to register to receive notification when any instance of that class fires an event.

It's very simple to implement. Here is the code to drop into Observable.js along with doc comments and usage notes:



/**
* Sets observability on the passed class constructor.<p>
* <p>This makes any event fired on any instance of the passed class also fire a single event through
* the <i>class</i> allowing for central handling of events on many instances at once.</p>
* <p>Usage:</p><pre><code>
Ext.util.Observable.observeClass(Ext.data.Connection);
Ext.data.Connection.on('beforerequest', function(con, options) {
console.log("Ajax request made to " + options.url);
});</code></pre>
* @param {Function} c The class constructor to make observable.
* @member Ext.util.Observable
* @method observeClass
* @static
*/
Ext.util.Observable.observeClass = function(c) {
Ext.apply(c, new Ext.util.Observable());
c.prototype.fireEvent = function() {
return (c.fireEvent.apply(c, arguments) !== false) &&
(Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false);
};
};


Important
For 2.* code, the following code is alo needed:



Ext.override(Ext.util.Observable, {
addListener: Ext.util.Observable.prototype.addListener.createInterceptor(function() {
if (!this.events) {
this.events = {};
}
})
});
Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;

[jay@moduscreate.com]

Am i missing something? I just extend observable by default, which gives me this functionality for any class.

[Animal]

Yes, you're missing something. ;)

This adds observability to the class.

So at the start of my application, I have



// Begin the session timeout countdown
AU.startTimeout();

// Add observability to the Connection class
Ext.util.Observable.observeClass(Ext.data.Connection);

// Reset the session timeout countdown on every Ajax return
Ext.data.Connection.on('requestcomplete', AU.startTimeout);


This means that EVERY Ajax request whether it be from a GridPanel, or a ComboBox, or a DataView, or a FormPanel, or some code somewhere calling Ext.Ajax.request will end up notifying that listener.

The observability is at the class level.

[jay@moduscreate.com]

Ah, I get it. :)

[aconran]

This is hot. At the very least it could certainly help debugging some issues.

Great idea.

[Animal]

Yes, I was thinking about that. Debugging, tracking, performance monitoring. Loads of applications for this concept.

[jack.slocum]

Looks very useful and is small code... good fit for the trunk Nige. :)

[Animal]

Is this going to make it into 3.0? I think the override code is already used out in the wild.

[aconran]

Committed revision 3219.

[Animal]

Superb.

So we can recommend people add this snippet to the beginning of their onready function:



Ext.util.Observable.observeClass(Ext.Container);
Ext.Container.on("add", function(cont, comp){
if (!cont.initialConfig.layout) {
var valid = (cont instanceof Ext.TabPanel) ||
(cont instanceof Ext.FormPanel &&
((comp instanceof Ext.form.Field) ||(comp instanceof Ext.form.FieldSet)));
if (!valid) {
console.info("Warning!", "Component " + comp.id + " added to no-layout Container " + cont.id);
}
}
});


Firefox+Firebug only because of console.log.... But then who seriously develops first on IE?:))

[mjlecomte]

I still vote for creating some kind of ux debugger.js file that could be included by a developer during development that would include warnings like that. Perhaps that region:'center' requirement exception could be off loaded there, lightening up ext-all. Could just start a thread for such a file and people can contribute bits over time.

[Animal]

Good idea. The check of the presence of center could be moved into an optionally added render listener on the Container class which only gets added if ext-instrumentation.js is loaded.

[varsos]

This is gold! =D>

Superb.

So we can recommend people add this snippet to the beginning of their onready function:



Ext.util.Observable.observeClass(Ext.Container);
Ext.Container.on("add", function(cont, comp){
if (!cont.initialConfig.layout) {
var valid = (cont instanceof Ext.TabPanel) ||
(cont instanceof Ext.FormPanel &&
((comp instanceof Ext.form.Field) ||(comp instanceof Ext.form.FieldSet)));
if (!valid) {
console.info("Warning!", "Component " + comp.id + " added to no-layout Container " + cont.id);
}
}
});


Firefox+Firebug only because of console.log.... But then who seriously develops first on IE?:))

[aconran]

I still vote for creating some kind of ux debugger.js file that could be included by a developer during development that would include warnings like that. Perhaps that region:'center' requirement exception could be off loaded there, lightening up ext-all. Could just start a thread for such a file and people can contribute bits over time.

I had always thought that the proper way to implement these type of checks would be through some sort of preprocessing engine that we would run through the code to add-in/strip-out the runtime checks for ext-all and ext-all-debug. Having the ability to dynamically inject these with a single file would be quite neat though. We'll have to check out what other types of things we could check for using this technique

[jerrybrown5]

If you agree that most who try to use Ext are well over their head than these kind of checks will make the difference to many of them to use Ext and not. If you don't agree--with all due respect--I suggest you to promptly review the forum and count the number of redundant questions that such kind of checker would eliminate. I'm not sure I agree with these checks being in an external debug file since this would be something else that could get set wrong. Instead, I believe there should be a global Ext.isDebug mode which should be turned on by default on all samples. Therefore, it would take some level of expertise before turning it off, hopefully this is at the same point that they don't need the checker anymore. :)

Regards,
Jerry

[jay@moduscreate.com]

Would it make sense to add 'unObserveClass' as well? I can envision instances where i want to observe a class for a set amount of time during debugging then yank the listener.

Thoughts?

[Animal]

You can add and remove listeners in the usual way.

[jay@moduscreate.com]

N/m duh me. :)

[queej]

I had to add the following line to the code snippet above for 3.0:

valid = valid && !(cont instanceof Ext.menu.Menu);

Otherwise, all menus were being flagged by the warning, including the one in GridView.js, line 738.

[Animal]

Yep, Menus have their own default layout, so do not need one.