Ext.js - Sistema de Classes

Ext JS é um framework JavaScript com funcionalidades de programação orientada a objetos. Ext é o namespace, que encapsula todas as classes em Ext JS.

Definindo uma classe em Ext JS

Ext fornece mais de 300 classes, que podemos usar para várias funcionalidades.

Ext.define () é usado para definir as classes em Ext JS.

Sintaxe

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

O nome da classe é o nome da classe de acordo com a estrutura do aplicativo. Por exemplo, appName.folderName.ClassName studentApp.view.StudentView.

As propriedades / membros da classe definem o comportamento da classe.

A função de retorno de chamada é opcional. É chamado quando a classe foi carregada corretamente.

Exemplo de definição de classe 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'
   }]
});

Criando Objetos

Assim como outras linguagens baseadas em OOPS, podemos criar objetos em Ext JS também.

A seguir estão as diferentes maneiras de criar objetos em Ext JS.

Usando nova palavra-chave

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

Herança em Ext JS

Herança é o princípio de usar a funcionalidade definida na classe A na classe B.

Em Ext JS, a herança pode ser feita usando dois métodos -

Ext.extend

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

Aqui, nossa classe personalizada StudentDetailsGrid está usando os recursos básicos da classe Ext JS GridPanel.

Usando Mixins

Mixins é uma maneira diferente de usar a classe A na classe B sem extensão.

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

Mixins são adicionados no controlador onde declaramos todas as outras classes como store, view, etc. Desta forma, podemos chamar a classe DepartmentUtils e usar suas funções no controlador ou neste aplicativo.