Ext.js - Sistema de clases

Ext JS es un marco de JavaScript que tiene funcionalidades de programación orientada a objetos. Ext es el espacio de nombres, que encapsula todas las clases en Ext JS.

Definición de una clase en Ext JS

Ext proporciona más de 300 clases, que podemos utilizar para diversas funcionalidades.

Ext.define () se utiliza para definir las clases en Ext JS.

Sintaxis

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

El nombre de la clase es el nombre de la clase según la estructura de la aplicación. Por ejemplo, appName.folderName.ClassName studentApp.view.StudentView.

Las propiedades / miembros de la clase definen el comportamiento de la clase.

La función de devolución de llamada es opcional. Se llama cuando la clase se ha cargado correctamente.

Ejemplo de definición de clase 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'
   }]
});

Creando Objetos

Al igual que otros lenguajes basados ​​en OOPS, también podemos crear objetos en Ext JS.

A continuación se muestran las diferentes formas de crear objetos en Ext JS.

Usando nueva palabra clave

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

Usando Ext.create ()

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

Herencia en Ext JS

La herencia es el principio de utilizar la funcionalidad definida en la clase A en la clase B.

En Ext JS, la herencia se puede hacer usando dos métodos:

Ext. Extender

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

Aquí, nuestra clase personalizada StudentDetailsGrid utiliza las características básicas de la clase Ext JS GridPanel.

Usando Mixins

Mixins es una forma diferente de usar la clase A en la clase B sin extensión.

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

Los mixins se agregan en el controlador donde declaramos todas las otras clases como store, view, etc. De esta manera, podemos llamar a la clase DepartmentUtils y usar sus funciones en el controlador o en esta aplicación.