Extjs class example.

A car object in pure javascript

var myCar = new Object();
myCar.company = "Ford";
myCar.model = "Mustang";
myCar.year = 2007

alert(myCar.company);//displays Ford

A car class in ExtJS



Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.define("Car",
                            {
                                company: "Ford",
                                 model: "Mustang",
                                  year: 2007
                             }
                         );

        var myCar = Ext.create("Car");
        alert(myCar.company);

    }


});



The general syntax for defining classes in Extjs is

Ext.define(className, members, onClassCreated);

className: The class name
members is an object that represents a collection of class members in key-value pairs
onClassCreated is an optional function callback that is invoked when all dependencies of the defined class are ready and the class itself is fully created. Due to the asynchronous nature of class creation, this callback can be useful in many situations.

The config member

Extjs classes have a special property called config. If you put properties inside this property, then you can call set and get on them. You also can define an apply on these properties that run as soon as a set is called on them. The set get and apply names are by convention (see example below)

Ext.application({
    name: 'Fiddle',

    launch: function() {


        Ext.define("Car", {
            company: "Ford",
            model: "Mustang",
            config: {
                year: 2007
            },

            applyYear: function(year) {
                alert("applying year");
                return year;
            }

        });

        var myCar = Ext.create("Car");

        myCar.setYear(2010);
        alert(myCar.getYear()); //Displays 2010

        myCar.setCompany("Toyota"); //fails because not inside config
        myCar.getCompany(); //fails because not inside config
    }


});