The Ext.define method is used to define new classes. It uses a string-based definition, leaving the framework to take care of the namespacing and concrete defining of the class:

At this point our class is fully created, and all that is left to do is to execute the callback function (defined as the third parameter to Ext.define) to signal the class definition being complete. The full process can be seen in the following diagram:

This model is extremely flexible and allows you to include your own pre or post processor at any stage in the sequence by using the registerPreProcessor and registerPostProcessor methods.

All Ext JS 4 classes inherit from a common base class, named Ext.Base. This class contains several methods that provide basic functionality to all created subclasses, for example override and callParent. When we define a new class using the Ext.define method, and don't specify an explicit base class, then the framework will automatically use Ext.Base as its base inside the Extend preprocessor. If we do specify a base class then that class will, at the root of its inheritance tree, extend Ext.Base. The following diagram shows how our custom class fits into this structure:

The new Ext JS class system also takes care of a lot of the heavy lifting for you when it comes to defining your properties, configuration options, and their associated getter and setter methods.

If you define these configuration options within a config object, the class system (inside its Config pre-processor) will automatically generate get, set, reset, and apply methods. This reduces the amount of code that needs to be maintained and downloaded.

The following code sample utilizes this config option and takes advantage of the free code that the framework will create. This code is initialized by calling the initConfig method within the constructor, which is executed when your class is instantiated.

Ext.define('Cookbook.Vehicle', {
    config: {
        Manufacturer: 'Aston Martin',
        Model: 'Vanquish'
    },

    constructor: function(config){
        // initialise our config object
        this.initConfig(config);
    },

    getDetails: function(){
        alert('I am an ' + this.Manufacturer + ' ' + this.Model);
    }
});

// create a new instance of Vehicle class
var vehicle = Ext.create('Cookbook.Vehicle');

// display its details
vehicle.getDetails();

// update Vehicle details
vehicle.setManufacturer('Volkswagen');
vehicle.setModel('Golf');

// display its new details
vehicle.getDetails();

By using this approach it is the equivalent of defining your class with the explicit methods shown as follows:

Ext.define('Cookbook.Vehicle', {
    Manufacturer: 'Aston Martin',
    Model: 'Vanquish',

    getManufacturer: function(){
        return this.Manufacturer;
    },
    setManufacturer: function(value){
        this.Manufacturer = value;
    },
    resetManufacturer: function(){
        this.setManufacturer('Aston Martin');
    },
    applyManufacturer: function(manufacturer){
        // perform some action to apply the value (e.g. update a DOM element)
        return manufacturer;
    },

    getModel: function(){
        return this.Model;
    },
    setModel: function(value){
        this.Model = value;
    },
    resetModel: function(){
        this.setModel('Vanquish');
    },
    applyModel: function(model){
        // perform some action to apply the value (e.g. update a DOM element)
        return model;
    },

    getDetails: function(){
        alert('I am an ' + this.Manufacturer + ' ' + this.Model);
    }
});

Sometimes we will want to perform some extra actions when calling these generated methods. We can do this by explicitly defining our own version of the method that will override the generated one. In our example, when calling the apply method, we want to update a DOM element that contains the Vehicle's name, so the change is reflected on the screen. First we add some markup to hold our Vehicle's data:

<span id="manufacturer"></span>
<span id="model"></span>

Now we override the applyManufacturer and applyModel methods to perform an update of each DOM element when the properties are changed:

Ext.define('Cookbook.Vehicle', {
    config: {
        Manufacturer: 'Aston Martin',
        Model: 'Vanquish'
    },

    constructor: function(config){
        // initialise our config object
        this.initConfig(config);
    },

    getDetails: function(){
        alert('I am an ' + this.getManufacturer() + ' ' + this.getModel());
    },

    applyManufacturer: function(manufacturer){
        Ext.get('manufacturer').update(manufacturer);
        return manufacturer;
    },
    applyModel: function(model){
        Ext.get('model').update(model);
        return model;
    }
});
// create a Vehicle and set its Manufacturer and Model
var vehicle = Ext.create('Cookbook.Vehicle');
vehicle.setManufacturer('Volkswagen');
vehicle.setModel('Golf');