Ext.js - OOPS Concepts

Quiz

Ext JS is a JavaScript framework which has 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 classes in Ext JS.

Syntax

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

Class name is the name of class according to app structure e.g. appName.folderName.ClassName studentApp.view.StudentView.

Class properties/members - which define 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.

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 in 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.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

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

Using Mixins
Mixins is the different way of using class A in class B without extend.
```
mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},
```

Mixins we add in 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 controller or in this application.

Print Page