JavaScript Classes

Javascript is prototype based, meaning that it differs from typical class based programming languages. In javascript, creating new classes is done by modifying the prototype of an object. Ext provides a number of functions that make it simple to create and work with classes. There is a good discussion on various javascript-based inheritance functions here.

Ext.extend

Ext provides a series of functions to extend or override existing javascript classes. This means you can add behaviours and create your own classes, or override the behaviour of a select few functions to suit your needs.

extend

Creates a new class definition. The first argument is the class to extend. The second parameter is a list of properties/functions to add to the prototype of the object. When using extend, Ext keeps a reference to the superclass, as shown in the second example.

Person = Ext.extend(Object, {
    constructor: function(first, last){
        this.firstName = first;
        this.lastName = last;
    }

    getName: function(){
        return this.firstName + ' ' + this.lastName;
    }
});

Developer = Ext.extend(Person, {
    getName: function(){
        if(this.isCoding){
            return 'Go Away!';
        }else{
            // Access the superclass getName method
            return Developer.superclass.getName.call(this); 
        }
    }
});

var p = new Person('John', 'Smith');
alert(p.getName());

override
Similar to extend, however override doesn't create a new class definition. Instead it just changes the behaviour of the existing class. The first parameter is the class to override, the second parameter is the list of properties/functions to add t othe prototype of the object.
```
// Assumes we've declared our Person class above.
Ext.override(Person, {
    getName: function(){
        // Override the behaviour, return the last name first.
        return this.lastName + ' ' + this.firstName; 
    }
});
```

Things that go in the prototype are shared

When placing items in the prototype of the prototype, they will be shared across all instances of the class. Unless you specifically want to do this, you should only put "primitive" types inside the prototype definition.

MyClass = Ext.extend(Object, {
    // This object literal is now shared between all instances of MyClass.
    baseParams: {}, 
    
    foo: function(){
        this.baseParams.bar = 'baz';
    }
});

Ext.onReady(function(){

    var a = new MyClass();
    var b = new MyClass();
    
    a.foo();
    // Modifying baseParams in a affects baseParams in b.
    console.log(b.baseParams); 
});

Singletons

Otherwise known as the module design pattern this pattern allows you to create private JS Variables or methods through the clever use of closures. The singleton is a good pattern to use when you you have a class of static methods, or you have a class that will only be used once. A good candidate for a singleton is the entry point into your application.

MyApp = function(){
    var data; data is private and can't be accessed from outside.
    return {
        init: function(){
            // Initialize application here
        },
        
        getData: function(){
            return data;
        }
    };
}();
Ext.onReady(MyApp.init, MyApp);

Ext.util.Observable

The Observable (or subscriber) pattern is used to decouple objects that need to know details about the state of other objects. It does this by using events. When the state of the subject changes, the subject will fire an event. Subscribers to that particular event on the subject will then be notified that the state change has occurred. Many Ext classes extend Observable to allow for a flexible, decoupled programming model. You can easily create classes that fire custom events:

var MyClass = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.addEvents('datachanged'); // specify the events we're going to fire
        MyClass.constructor.call(this, config);
    },
    
    update: function(){
        // do some data transformation here
        // When firing an event, we can specify what parameters are 
        // passed to the subscribers.
        this.fireEvent('datachanged', this, this.data.length); 
    }
});

// To subscribe to an event
var c = new MyClass();
c.on('datachanged', function(obj, num){
    // react to the data changed event.
});

Namespaces

Namespaces are useful for organizing your code, they provide 2 main benefits. The first is that you can use them to prevent polluting the global namespace with objects, which is generally considered to be undesireable. Ext, for example has just a single global object (the Ext object). It's good practice to put any classes inside a namespace, a common one is the name of your company or the name of your application. The other advantage is that assists in keeping your code organized, you can group together similar or co-dependent classes in the same namespace, which helps to specify your intent to other developers.