Ext.js - Sınıf Sistemi

Ext JS, nesne yönelimli programlama işlevlerine sahip bir JavaScript çerçevesidir. Ext, Ext JS'deki tüm sınıfları kapsayan ad alanıdır.

Ext JS'de bir Sınıf Tanımlama

Ext, çeşitli işlevler için kullanabileceğimiz 300'den fazla sınıf sağlar.

Ext.define (), Ext JS'deki sınıfları tanımlamak için kullanılır.

Sözdizimi

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

Sınıf adı, uygulama yapısına göre sınıfın adıdır. Örneğin, appName.folderName.ClassName studentApp.view.StudentView.

Sınıf özellikleri / üyeleri, sınıfın davranışını tanımlar.

Geri arama işlevi isteğe bağlıdır. Sınıf düzgün yüklendiğinde çağrılır.

Ext JS Sınıfı Tanımı Örneği

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

Nesne Oluşturma

Diğer OOPS tabanlı diller gibi, Ext JS'de de nesneler oluşturabiliriz.

Ext JS'de nesne oluşturmanın farklı yolları aşağıda verilmiştir.

Yeni anahtar kelime kullanmak

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

Ext.create () kullanarak

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

Ext JS'de kalıtım

Kalıtım, A sınıfında tanımlanan işlevselliği B sınıfına kullanma ilkesidir.

Ext JS'de, kalıtım iki yöntem kullanılarak yapılabilir -

Ext.extend

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

Burada, StudentDetailsGrid özel sınıfımız, Ext JS sınıfı GridPanel'in temel özelliklerini kullanıyor.

Mixin Kullanımı

Mixins, B sınıfında A sınıfını uzatmadan kullanmanın farklı bir yoludur.

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

Miksinler, depolamak, görüntülemek vb. Gibi diğer tüm sınıfları ilan ettiğimiz denetleyiciye eklenir. Bu şekilde DepartmentUtils sınıfını çağırabilir ve denetleyicideki veya bu uygulamadaki işlevlerini kullanabiliriz.