ExtJS inheritance strategy

I've been struggling for quite some time to come up with a strategy for writing ExtJS code so that no matter what kind of class I'm extending everything looks the same. Today I've finally ended up with what I wanted :). In this case I'm working with Ext 2.0.2 but it should apply without any changes to all versions of this wonderful library.

Challenges

I've set a goal to be as follows:

1. Instances will have proper class names and not some generated names
2. Declarations will present themselves in the code exactly the same way regardless of the base type
3. The code will look understandable

The template

First we need a namespace so that the global one doesn't get polluted:

Ext.ns("Namespace");

view raw example1.js hosted with ❤ by GitHub

Then we need to define the constructor (this will give the actual name for the class later on:

	Namespace.ClassName = function(config) {
	// optionally: define events for objects of this class
	this.addEvents({
	"event1" : true,
	"event2" : true
	});
	// call base constructor with overridable parameters
	Namespace.ClassName.superclass.constructor.call(this, Ext.applyIf(config || { }, {
	// here come the default configuration values
	setting : 'value',
	listeners: {
	// this is how you specify event handlersa
	"event1": this.handler
	// you can optionally specify the scope used by this event handler
	// and even an optional delay
	"event2": { fn: this.handler, scope: this, delay: 100 },
	// if you'd like to set the default scope for event handlers this is how you do it:
	scope: this // or any other object
	}
	}));
	};

view raw example2.js hosted with ❤ by GitHub

And finally we'll implement some public methods:

	Ext.extend(Namespace.ClassName, BaseClass, {
	handler: function(event-params) {
	// this is really the instance...
	}
	public_method: function() {
	// "this" is really the instance of the class
	// this is how you fire an event:
	this.fireEvent("event1", { data: "event data" });
	}
	});

view raw example3.js hosted with ❤ by GitHub

This way the actual class is "Namespace.ClassName" and not some wierdo, public methods are cleanly separated and default configuration is in one place.

As a bonus this pattern works for every single class - no matter if it is a component (GridPanel, Window) or not (ie. Store)

I hope this will make someone's coding adventure a little bit less messy :)


Have a nice day!