ExtJS 4 – Classes

ExtJS 4 provides a new class system with following capabilities

• Support for mixins
• Statics – propeties and methods
• Dynamic generation of getters and setters for class properties
• Automatic dependency management.

Defining a new class

Define a new class using “Ext.define()” method.  Ext.define does the following

• creates the namespace
• can extend a exiting class

Lets define a class

// Define a person class

Ext.define('Training.class.Person', {
    // list of properties, setter and getter of all the property will
    // be available on instantiation.
    config:{
        firstname:'',
        lastname:'',
        age:'',
        city:'',
        country:''
    },
    constructor:function (config) {
        this.initConfig(config);

    }
});

As you can see from the above snippet, the class has set of properties and a constructor defined. The constructor takes a configuration object.

The call to “initConfig(…)” will create setter and getter.

We can create object by using Ext.create(…). The create method takes the class name (in this case ‘Training.class.Person’) and a JavaScript object (configuration). Lets see the code.

var init = function () {
// creating a object
   var init = function () {
    var newPerson = Ext.create('Training.class.Person', {
        firstname:'John',
        lastname:'Doe',
        age:new Date(),
        city:'Brooklyn',
        country:'US'
    });
	// Use firebug to see the console output. if using IE use replace console.log with alert.
    console.log('Person firsname  '+newPerson.getFirstname());
    console.log('Person lastname '+newPerson.getLastname());
    console.log('Person age '+newPerson.getAge());
    console.log('Person city '+newPerson.getCity());
};
};

Ext.onReady(init);

The demo can be found here

The automatic setters and getters are not to be overridden. Instead, the class framework provides ways to override them. For example, in Person class, we need to modify the firstname setter , we need to provide an applyFirstname function. The applyConfig function is invoked when we set the value.

Ext.define('Training.class.Person', {
    // list of properties, setter and getter of all the property will
    // be available on instantiation.
    config:{
        firstname:'',
        lastname:'',
        age:'',
        city:'',
        country:''
    },
    constructor:function (config) {
        this.initConfig(config);

    },
	// called while setting value for setFirstname
    applyFirstname:function(value){
        return value.toUpperCase();
    }
});

Similarly we can define applyLastname, applyAge….. .

The demo can be found here

We can define any number of custom function like code below.

Ext.define('Training.class.Person', {
    // list of properties, setter and getter of all the property will
    // be available on instantiation.
    config:{
        firstname:'',
        lastname:'',
        age:'',
        city:'',
        country:''
    },
    constructor:function (config) {
        this.initConfig(config);

    },
    applyFirstname:function(value){
        return value.toUpperCase();
    },
    // we can define method and call from the object.
    getLongName:function(){
        return this.firstname +","+this.lastname;
    }
});