API of Ext JS has been designed specially for developers who are working with Object-oriented(OO) languages. Libraries are organized into packages and classes.

We will be discussing below listed topic.

1. API Structure
2. Classes and Objects
3. Constructor
4. Property
5. Config
6. Method

1) API Structure

API is grouped into packages similar to Java. Every package contains a collection of classes, whose names begin with the letters Ext. Examples are Ext.model.Model, Ext.store.Store etc. technically Ext is a JavaScript object that houses all other classes in Ext JS.

Ext is defined as
var Ext = {};

The general format of any class name is
Ext.packageName.optionalSubPackageName.ClassName

Package names begin with a lowercase character and Class names begin with an uppercase character. The names follow the “CamelCase” naming convention similar to Java. Ext.Base is the base class for all the classes in Ext JS.

2) Classes and Objects

We can create a new class in Ext JS using Ext.define method.

Ext.define("com.code2succeed.School",{});

“School” is the name of class which is inside package “com.code2succeed”and we can pass object as argument while defining a class.

We can create an object of the School class using Ext.create method as shown here.

var school = Ext.create("com.code2succeed.School");

Also we can use new keyword to create an object of the School class.

var school1 = new com.code2succeed.School();

3) Constructor

Similar to Java, In Ext JS constructor of the class get invoked whenever we are creating an object of the class.

Ext.define("com.code2succeed.School",{
      constructor : function() {   
           console.log("School created"); 
      } 
});

On creating an object of class com.code2succeed.School the constructor gets invoked and School created printed on the console.

4) Property

Similar to instance variable in Java, we can define variables in Ext JS.

Ext.define("com.code2succeed.School",{ 
	name : "", 
	noOfFaculties : 0, 
	constructor : function(name,noOfFaculties){  
		this.name = name;  
		this.noOfFaculties = noOfFaculties;  
	} 
});

In above example we have created School class with 2 property name and noOfFaculties. Properties are initialized using this keyword, which make them visible to object of the class.

Now create object of School class using below code.

var school = Ext.create("com.code2succeed.School", "Code2Succeed", "100");
console.log("Name : "+school.name);
console.log("noOfFaculties : "+school.noOfFaculties );

The above code snippet will print following on console.

Name : Code2Succeed
noOfFaculties : 100

5) Config

Ext JS  provides a config section for every class where we can list the attributes of the class with default values.

Ext.define("com.code2succeed.School",{
	config: {
		name : "", 
		noOfFaculties : 0 
	},
	constructor : function(cfg){  
		this.initConfig(cfg);  
	} 
});

In the code snippet above, we’ve defined a School class with name and noOfFaculties listed in the config section. The config section is initialized in the constructor by calling the initConfig method. The initConfig method that is present in Ext.Base class initializes the configuration object.

The creation of object for class School will remain the same.

var school = Ext.create("com.code2succeed.School", "Code2Succeed", "100");

6) Method

We can define custom methods in a class.

Ext.define("com.code2succeed.School",{
	config: {
		name : "", 
		noOfFaculties : 0 
	},
	constructor : function(cfg){  
		this.initConfig(cfg);  
	},
	display: function() {
		console.log("Name : "+name);
		console.log("noOfFaculties : "+noOfFaculties);
	}
});

We have defined a custom method display in the School class which can be accessed using the object reference.

var school = Ext.create("com.code2succeed.School", "Code2Succeed", "100");
school.display();

The above code snippet will print following on console.

Name : Code2Succeed
noOfFaculties : 100