Ext.js - Class System

Ext JS is a JavaScript framework having functionalities of object oriented programming. Ext is the namespace, which encapsulates all the classes in Ext JS.

Defining a Class in Ext JS

Ext provides more than 300 classes, which we can use for various functionalities.

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

Syntax

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

Class name is the name of the class according to app structure. For example, appName.folderName.ClassName studentApp.view.StudentView.

Class properties/members defines the behavior of class.

Callback function is optional. It is called when the class has loaded properly.

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.

Advertisements