Simple demonstration of Ext.extend

I have used javascript before in many project but never looked at javascript from object oriented programming prospective. As I started learning extjs, i am finding some interesting OO fundamentals in javascript. Here is a simple demonstration of extjs’s extend feature.


// declares class 'a'
var a = function(){
// constructor
console.log('in a class constructor');
};

// defines memebers in class ‘a’
a.prototype = {
foo: function() {
console.log(‘in a class m1()’);
},
bar: function() {
console.log(‘in a class m2()’);
}
};

// declares class ‘b’
var b = function() {
console.log(‘in b class constructor’);
b.superclass.constructor.call(this);
};

// extends class ‘a’
Ext.extend(b, a, {
// overrides method ‘bar’
bar : function() {
console.log(‘in b class m2()’);
}
});

// on document ready..

Ext.onReady(function(){
// declares aVar of type ‘a’
var aVar = new a();

// calls methods using aVar
aVar.foo();
aVar.bar();

// declares bVar of type ‘b’
var bVar = new b();

// calls methods using bVar
bVar.foo();
bVar.bar();

});

Output in forebug console when page loads –

in a class constructor
in a class m1()
in a class m2()
in b class constructor
in a class constructor
in a class m1()
in b class m2()