The new class system has implemented various naming conventions including classes, methods, files, variables, properties, and so on. Usage of this makes the code more readable, structured, and maintainable.

The new class system has introduced a new method called Ext.define to define a new class. The following code shows how we have defined a User class, which has got three properties—name, address, and age—a constructor, and a getName method:

Ext.onReady(function() {
  
  //Define class
  Ext.define('User', {
    name: '',
    address: '',
    age: 0,
    
    constructor: function(name, address, age) {
      this.name = name;
      this.address = address;
      this.age = age;
    },
    getName: function() {
      return this.name;
    }
  });
  
  //Create an instance
  var user = new User('Ajit Kumar', 'Plot# 66, ABC Lane, XYZ Street, My State, My Country - 500014', 34);
  
  alert(user.getName());
});

Once the class is defined, we used the Ext.create method offered by the class system to create an instance of the User object. Once instantiated, we can access the properties or call methods as shown in the earlier code where we are calling the getName method to show the username on the screen. You may save the earlier code in a file, say ch03_02.js, include it in index.html and run it in your browser to play with it.

Ext.define('User', {
  config: {
    name: '',
    address: '',
    age: 0
  },
  constructor: function(config) {
    this.initConfig(config);
  }
});

Ext.onReady(function() {
  
  var user = Ext.create('User', {
    name: 'Ajit Kumar',
    address: 'Plot# 66, ABC Lane, XYZ Street, My State, My Country - 500014',
    age: 34
  });
    
  alert(user.name + ":" + user.getAddress());
});

In the previous chapter, we gave the alias names to our various view classes, for example, widget.userlist to AM.view.user.List class. Alias is another name by which the class can be referred. There are rules built into the system around this property in some cases. For example, when we defined the widget.userlist property as an alias, we could use userlist as an xtype and the class loader would be able to resolve the userlist property to AM.view.user.List based on the built-in rule around the alias.

If we give an alias to our class name it will have multiple names, and different parts of the applications can use different names but still mean the same object. Let us say, we want to give an alias name AppUser to our User class so that we can instantiate it using the alias name.

To achieve this, first, we will have to set the alias property on the User class, as shown:

Ext.define('User', {
  alias: ['AppUser'],
  config: {

Now, if we try to create the user instance using the AppUser name, the class loader will fail to locate the file where the User class is defined as it will be looking for the AppUser.js file, which does not exist. To address this problem, we will have to add the following statement before the Ext.onReady() call:

Ext.require('User'),

In the previous statement, we have explicitly mentioned the dependency so that the loader loads it and once it is loaded, we are free to create the instance using the alias name as shown in the following code:

  var user = Ext.create('AppUser', {
    name: 'Ajit Kumar',
    address: 'Plot# 66, ABC Lane, XYZ Street, My State, My Country - 500014',
    age: 34
  });

alias is generally used to define as xtype.

A class has a property—alternateClassName—which can be used to define any number of alternate names for the class. Once defined, the class can be referred using any of these alternate names. For example, in the following code, we have defined an alternate name AppUser for our User class as shown in the following code:

Ext.define('User', {
  alternateClassName: 'AppUser',
  config: {

Once defined, the instance of the class can be created using the alternate name, similar to how we instantiated using the alias name. The Ext.require statement must mention the User class if you want to use the alternate name to instantiate the class.

A class can be extended from an existing class and this is indicated using the extend property on a class. In the following code, we have defined the Employee class, which extends the User class. It defines an additional property: department.

Ext.define('Employee', {
  extend: 'User',
  config: {
    department: ''
  },
  constructor: function(config) {
    this.initConfig(config);
  }
});

Save this code in the Employee.js file for future references.

Now, we can create an instance of Employee by passing the properties for it, as shown in the following code:

  var employee = Ext.create('Employee', {
    name: 'Ajit Kumar',
    address: 'Plot# 66, ABC Lane, XYZ Street, My State, My Country - 500014',
    age: 34,
    department: 'Finance'
  });

Since we used the config term in the Employee class, the getter/setter methods are available to us and we can call them to show the employee detail by using the following command:

alert(employee.getName() + ":" + employee.getDepartment());

In a class we can define static properties as well as methods. Static properties and methods are called class-level properties and methods, which means to access them we do not need an instance object. They are accessed directly using the class.

In the following code, we modified our User class' definition inside User.js by adding a count static property to keep track of the number of instances created in the system, as shown in the following code:

statics: {
    count: 0
  },
constructor: function(config) {
    this.initConfig(config);
    this.self.count++;
  }

To access static properties, one has to use the this.self keyword, which gives the reference to the class, as we did in the constructor code to increment the count counter.

The following code shows how we can use the static property to print the number of users created in the system:

alert('Total users in the system: ' + User.count);

inheritableStatics: {
    count: 0
  },

constructor: function(config) {
    this.initConfig(config);
    this.self.count++;
  }

  Ext.create('AppUser', {
    …
  });
  
  Ext.create('Employee', {
    …
  });
  
  Ext.create('Employee', {
    …
  });
  
  Ext.create('Employee', {
    …
  });

alert('Total users in the system: ' + Employee.count);

Mixin is a pattern which allows us to mix one class' properties and their behavior into the other class. The classes (say, A) mentioned as mixins are merged into a class (say, B) then the properties and methods of class A can directly be accessed through class B.

Say, we want to have a method getString on our User class, which can return the string format of the object containing the user's name, age, and address. Now, we want to implement this in such a way that it can be applied to any class, which has got three properties—name, address, and age. So, we first define a ToString class with the getString method, as shown in the following code:

Ext.define('ToString', {
  getString: function() {
    return "NAME: " + this.name + "
ADDRESS: " + this.address + "
AGE: " + this.age;
  }
});

As per the naming convention, we will save the previous code in the ToString.js file.

Now, we would mention the ToString class as a mixin property on the User class, as shown in the following code:

config: {
    name: '',
    address: '',
    age: 0
  },
  mixins: {
    Stringyfy: 'ToString'
  },

Mixins are, by default, inheritable. So, getString can be called on the Employee instances, as well. However, for the employee, let us say we also want to add the department info to the string. To achieve that, in the Employee class we will add a getString method, which will call the base getString method of the mixin class, that can give us the name, address, and age information, and append the department information to it, as shown in the following code:

config: {
    department: ''
  },
  getString: function() {
    return this.mixins.Stringyfy.getString.call(this) + "
DEPARTMENT: " + this.department;
  },

Now we can call the getString method on the user object to show the details of the user, such as the name, address, and age by using the following command:

alert(user.getString());

We can also call the getString method on the employee object to show the name, address, age, and department detail of the employee by using the following command:

alert(employee.getString());

When we run the code, it shows the employee detail in the alert, as shown in the following screenshot:

A class has a singleton property which can be used to tell the framework that only one instance of the class needs to be created. For example, in the following code, we have defined a Logger class as a singleton, which provides a log method that can be used to log messages on the console:

Ext.define('Logger', {
    singleton: true,
    log: function(msg) {
        console.log(msg);
    }
});

Save this code in the Logger.js file for future reference.

We will have to include the Logger class in the Ext.require list so that it is loaded:

Ext.require(['User', 'Logger']);

Now, we can make use of the class and call the log method in the code, as shown:

Logger.log(employee.getString());

When we run the application, we can see the employee information logged on the browser console, as shown in the following screenshot:

Uses versus requires

In the earlier code, we used Ext.require to list down the dependencies. A similar property exists on the class requires which is used to list out the class dependencies. All the dependencies listed in the class requires are loaded before the class can be initialized. The following code shows that Logger is mentioned as a dependency, which is required by the User class to log anything:

Ext.define('User', {
  alias: ['AppUser'],
  requires: ['Logger'],

When we run the application, we can see that the Logger.js is being loaded right after User.js is loaded, as shown in the following screenshot:

The property uses is available on a class to specify the classes that the class uses and it may not be a pre-requisite to the initialization of the class. If that is the case, we can use the uses property and list out the classes in it, as shown in the following code:

Ext.define('User', {
  alias: ['AppUser'],
  uses: ['Logger'],

In this case, the class Logger gets loaded before the onReady listener is called. The following screenshot shows that the sequence of load is different from the one in case of requires class:

Error reporting is a very important aspect of an application. The better the error reporting, the better the application usage and robustness would be. In the new class system, support has been built to report errors along with the stack trace. If the new Error class is used, it shows a nice error trace in the browser console. So, we would replace the alert message that we put in the User class to show a message of the age value for a user who is less than 18 years with the following statement:

throw new Error('Age must be greater than 18 Years'),

Now when a user is instantiated where the age is less than 18 years, we can see the following error trace:

This makes the error handling and debugging a lot better. But, here is the not-so-good news. This functionality is, currently, available only on Webkit browsers.