Define New Class:

Use Ext.define() method to define new custom class in Ext JS 4, 5 & 6.

Syntax:

Ext.define((String) className, (Object) classMembers, (Optional Function) onClassCreatedCallback);

Parameters:

className is the full class name in dot-namespaced format

classMembers is an object represents a collection of class members in key-value pairs (Javascript object literals)

onClassCreatedCallback is an optional function callback to be invoked when all dependencies of this class are ready, and the class itself is fully created.

Ext.define() performs the following operations:

  1. Detects and creates new namespaces if required.
  2. Extends an existing class.
  3. Verifies if the class being extended has been defined, if not, it will defer the creation of the new class until the class used for extending is available.
  4. Returns Ext.Base object.

Note: Ext.Base is root of all classes created with Ext.define. All the classes in Ext JS inherit from Ext.Base

Ext.define('Student', 
{
    name : 'unnamed',
    getName : function(){
        return "Student name is" + this.name;
    }
}, function(){
    alert('Student object created');
});

Above example defines Student class with one member variable 'name' and one method getName().

As per the syntax of Ext.define, the first parameter 'Student' is class name. The second parameter is a JavaScript object which contains name and getName(), and the third parameter (optional) is callback function which will be called after 'Student' class is created.

So this way you can create custom class in Ext JS.

Create an Object of a Class:

JavaScript allows us to create an object using new keyword. However, Sencha recommends to use Ext.create() method to create an object of a class which is created using Ext.define() method.

The following example demonstrates creating an object of the Student class and calling getName() method.

var studentObj = Ext.create('Student');
studentObj.getName();

Try it on https://fiddle.sencha.com/#fiddle/3kv