Ext.js - Sistema di classi

Ext JS è un framework JavaScript con funzionalità di programmazione orientata agli oggetti. Ext è lo spazio dei nomi, che incapsula tutte le classi in Ext JS.

Definizione di una classe in Ext JS

Ext fornisce più di 300 classi, che possiamo usare per varie funzionalità.

Ext.define () viene utilizzato per definire le classi in Ext JS.

Sintassi

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

Il nome della classe è il nome della classe in base alla struttura dell'app. Ad esempio, appName.folderName.ClassName studentApp.view.StudentView.

Le proprietà / i membri della classe definiscono il comportamento della classe.

La funzione di richiamata è opzionale. Viene chiamato quando la classe è stata caricata correttamente.

Esempio di definizione della classe JS Ext

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

Creazione di oggetti

Come come altri linguaggi basati su OOPS, possiamo creare oggetti anche in Ext JS.

Di seguito sono riportati i diversi modi di creare oggetti in Ext JS.

Utilizzo di una nuova parola chiave

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

Utilizzo di Ext.create ()

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

Ereditarietà in Ext JS

L'ereditarietà è il principio di utilizzo della funzionalità definita nella classe A nella classe B.

In Ext JS, l'ereditarietà può essere eseguita utilizzando due metodi:

Ext.extend

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

Qui, la nostra classe personalizzata StudentDetailsGrid utilizza le funzionalità di base della classe Ext JS GridPanel.

Utilizzando Mixin

Mixins è un modo diverso di utilizzare la classe A nella classe B senza estendere.

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

I mixin vengono aggiunti nel controller dove dichiariamo tutte le altre classi come store, view, ecc. In questo modo, possiamo chiamare la classe DepartmentUtils e utilizzare le sue funzioni nel controller o in questa applicazione.