Ext.js - Sistem Kelas

Ext JS adalah kerangka kerja JavaScript yang memiliki fungsi pemrograman berorientasi objek. Ext adalah namespace, yang merangkum semua kelas di Ext JS.

Mendefinisikan Kelas di Ext JS

Ext menyediakan lebih dari 300 class, yang dapat kita gunakan untuk berbagai fungsi.

Ext.define () digunakan untuk mendefinisikan kelas-kelas di Ext JS.

Sintaksis

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

Nama kelas adalah nama kelas menurut struktur aplikasi. Misalnya, appName.folderName.ClassName studentApp.view.StudentView.

Properti kelas / anggota mendefinisikan perilaku kelas.

Fungsi panggilan balik adalah opsional. Ini dipanggil ketika kelas telah dimuat dengan benar.

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

Membuat Objek

Seperti bahasa berbasis OOPS lainnya, kita juga dapat membuat objek dalam Ext JS.

Berikut adalah berbagai cara membuat objek di Ext JS.

Menggunakan kata kunci baru

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

Menggunakan Ext.create ()

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

Warisan di Ext JS

Pewarisan adalah prinsip penggunaan fungsionalitas yang didefinisikan di kelas A ke dalam kelas B.

Di Ext JS, pewarisan dapat dilakukan menggunakan dua metode -

Ext.extend

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

Di sini, kelas kustom StudentDetailsGrid kami menggunakan fitur dasar dari kelas Ext JS GridPanel.

Menggunakan Mixins

Mixins adalah cara berbeda untuk menggunakan kelas A di kelas B tanpa perluasan.

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

Mixin ditambahkan ke dalam pengontrol di mana kita mendeklarasikan semua kelas lain seperti store, view, dll. Dengan cara ini, kita dapat memanggil kelas DepartmentUtils dan menggunakan fungsinya di pengontrol atau dalam aplikasi ini.