Defining a Class in Ext JS

Ext.define() is used for defining the classes in Ext JS.

Example of Ext JS Class Definition

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'
   }]
});

Creating Objects

As like other OOPS based languages, we can create objects in Ext JS as well.

Following are the different ways of creating objects in Ext JS.

Using 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 using functionality defined in class A into class B.

In Ext JS, inheritance can be done using two methods −

Ext.extend

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

Here, our custom class StudentDetailsGrid is using the basic features of Ext JS class GridPanel.

Using Mixins

Mixins is a different way of using class A in class B without extend.

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

Mixins are added in the controller where we declare all the other classes such as store, view, etc. In this way, we can call DepartmentUtils class and use its functions in the controller or in this application.