Ext.js - система классов

Ext JS - это среда JavaScript, обладающая функциями объектно-ориентированного программирования. Ext - это пространство имен, которое инкапсулирует все классы в Ext JS.

Определение класса в Ext JS

Ext предоставляет более 300 классов, которые мы можем использовать для различных функций.

Ext.define () используется для определения классов в Ext JS.

Синтаксис

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

Имя класса - это имя класса в соответствии со структурой приложения. Например, appName.folderName.ClassName studentApp.view.StudentView.

Свойства / члены класса определяют поведение класса.

Функция обратного вызова не является обязательной. Он вызывается, когда класс загружается правильно.

Пример определения класса Ext JS

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

Создание объектов

Как и другие языки на основе OOPS, мы также можем создавать объекты в Ext JS.

Ниже приведены различные способы создания объектов в Ext JS.

Использование нового ключевого слова

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

Использование Ext.create ()

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

Наследование в Ext JS

Наследование - это принцип использования функциональности, определенной в классе A, в классе B.

В Ext JS наследование может быть выполнено двумя способами:

Ext.extend

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

Здесь наш собственный класс StudentDetailsGrid использует базовые функции класса Ext JS GridPanel.

Использование миксинов

Mixins - это другой способ использования класса A в классе B без расширения.

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

Миксины добавляются в контроллер, где мы объявляем все другие классы, такие как store, view и т. Д. Таким образом, мы можем вызвать класс DepartmentUtils и использовать его функции в контроллере или в этом приложении.