Ext .js Class system

Ext JS is a JavaScript framework with object-oriented programming capabilities.
Ext is the namespace that encapsulates all classes in Ext JS.

Define the class in Ext JS

Ext offers more than 300 classes that we can use for a variety of functions.

Ext.define() is used to define classes in Ext JS.

Grammar:

Ext.define(class name, class members/properties, callback function);

The class name is based on the class name of the application structure. appName.folderName.ClassName
studentApp.view.StudentView。

Class Properties/Members - Defines the behavior of a class.

Callback functions are optional. /b10> When the class loads correctly, it is called.

Ext JS class definition example

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

Create an object

Like other OOPS-based languages, we can also create objects in Ext JS.

Different ways to create objects in Ext JS.

Using the new keyword:

var studentObject = new student();
studentObject.getStudentName();

Using Ext.create():

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

Inheritance in Ext JS

Inheritance is the principle of applying the functionality defined in class A to class B.

There are two ways to inherit in Ext JS.

Ext.extend:

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

Here our custom class StudentDetailsGrid uses the basic functionality of the Ext JS class GridPanel.

Using Mixins:

Mixins is a different way to use Class A in Class B without an extension.

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Mixins we add in the controller, we declare all other classes, such as storage, views, etc. In this way, we can call the PartmentUtils class and use its functionality in the controller or in this application.