Ext.js Class System - Ext JS

What is the use of Class system in ExtJS?

Ext JS is a JavaScript framework which uses object oriented programming functionality. Ext is the namespace which summarizes all the classes in Ext JS.

Defining a class in Ext JS

Ext has more than 300 classes which can be used for different functionalities.

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

Syntax:

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

Class properties/members - defines the behaviour of class.

Callback function is optional which is called when a class is properly loaded.

Example of Ext JS class definition

Creating Objects

Similar to other OOPS based languages, we can also create objects in Ext JS.

Different ways of creating objects in Ext JS are:

Using new keyword:

Using Ext.create():

Inheritance in Ext JS

Inheritance means, using functionality defined in class A into class B.

In Ext JS, inheritance is done using 2 methods

Here custom class StudentDetailsGrid is making use of basic features of Ext JS class GridPanel.

Using Mixins:

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

Mixins are added in controller by declaring all the other classes such as store, view etc. Similarly DepartmentUtils class can be called to use its functions in controller or in this application.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ext JS Topics