Ext.js - Klassensystem

Ext JS ist ein JavaScript-Framework mit Funktionen der objektorientierten Programmierung. Ext ist der Namespace, der alle Klassen in Ext JS kapselt.

Definieren einer Klasse in Ext JS

Ext bietet mehr als 300 Klassen, die wir für verschiedene Funktionen verwenden können.

Ext.define () wird zum Definieren der Klassen in Ext JS verwendet.

Syntax

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

Klassenname ist der Name der Klasse gemäß der App-Struktur. Beispiel: appName.folderName.ClassName studentApp.view.StudentView.

Klasseneigenschaften / -elemente definieren das Verhalten der Klasse.

Die Rückruffunktion ist optional. Es wird aufgerufen, wenn die Klasse ordnungsgemäß geladen wurde.

Beispiel für die Definition einer Ext JS-Klasse

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

Objekte erstellen

Wie bei anderen OOPS-basierten Sprachen können wir auch in Ext JS Objekte erstellen.

Im Folgenden finden Sie die verschiedenen Möglichkeiten zum Erstellen von Objekten in Ext JS.

Neues Schlüsselwort verwenden

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

Verwenden von Ext.create ()

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

Vererbung in Ext JS

Vererbung ist das Prinzip der Verwendung der in Klasse A definierten Funktionalität in Klasse B.

In Ext JS kann die Vererbung mit zwei Methoden erfolgen:

Ext.extend

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

Hier verwendet unsere benutzerdefinierte Klasse StudentDetailsGrid die Grundfunktionen der Ext JS-Klasse GridPanel.

Mixins verwenden

Mixins ist eine andere Art, Klasse A in Klasse B ohne Erweiterung zu verwenden.

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

Mixins werden im Controller hinzugefügt, wo wir alle anderen Klassen wie Store, View usw. deklarieren. Auf diese Weise können wir die DepartmentUtils-Klasse aufrufen und ihre Funktionen im Controller oder in dieser Anwendung verwenden.