Учебники

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

Октябрь 1, 2018

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

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

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

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

61
Share: