Jason Clawson

Aaron Conran of ExtJS just published a post today recommending using namespaces to organize your Javascript code. I have a rewrite of the Ext.namespace function that I find a little more useful.

I wanted to do 2 things. Firstly I wanted to be able to do this: (it saved typing)

(function(){
  var NS = Ext.namespace("com.succinctllc.home.panel");
  NS.MyTestPanel = function(cfg){
    NS.MyTestPanel.superclass.constructor.call ... etc
  };
 
  Ext.extend(NS.MyTestPanel, Ext.Panel, {
     ...etc...
  });
})()

So, as you can see, I save a lot of typing when calling superclass methods. By returning the namespace from my custom Ext.namespace function (source at the bottom of this post) I am able to do this.

I also wanted to be able to apply “namespaces” to custom objects. For example, if I needed to build out a simple javascript object ensuring that a path of properties exist like so:

var myObject = {};
Ext.namespace(myObject, "user.firstName", "user.lastName");
myObject.user.firstName = "Jason";

The above code is a trivial example. I really use it to construct objects that are parseable by a JsonReader given the JsonReader’s configuration. I won’t get into why I do this… but I will just say it involves on-demand store loading from a tree datasource based on tree node expansions.

Please consider this code as a replacement for the default Ext implementation:

Ext.namespace = function(namespacePath){
	var i = 1, a=arguments, ptr = null, l1, l2, pathArr, j = 0, base=namespacePath;
	if (typeof base != "object") {
		i = 0;
		base = window;
	}		
	for(l1=a.length; i<l1; i++){
		pathArr = a[i].split(".");
		ptr = base;
		for(l2=pathArr.length; j<l2; j++){
			if (typeof ptr[pathArr[j]] == 'undefined')
				ptr[pathArr[j]] = {};
			ptr = ptr[pathArr[j]]; 
		}
	}
	return ptr;
};