Ext.js - 類系統

Ext JS 是一個 JavaScript 框架，具有面向物件程式設計的功能。Ext 是名稱空間，它封裝了 Ext JS 中的所有類。

在 Ext JS 中定義類

Ext 提供了 300 多個類，我們可以將其用於各種功能。

Ext.define() 用於在 Ext JS 中定義類。

語法

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

類名是根據應用程式結構命名的類名。例如，appName.folderName.ClassName studentApp.view.StudentView。

類屬性/成員定義了類的行為。

回撥函式是可選的。當類正確載入時，它會被呼叫。

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

建立物件

與其他基於 OOPS 的語言一樣，我們也可以在 Ext JS 中建立物件。

以下是 Ext JS 中建立物件的幾種方法。

使用 new 關鍵字

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

使用 Ext.create()

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

Ext JS 中的繼承

繼承是將類 A 中定義的功能用於類 B 的原則。

在 Ext JS 中，繼承可以透過兩種方法完成：

Ext.extend

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

在這裡，我們的自定義類 StudentDetailsGrid 使用了 Ext JS 類 GridPanel 的基本功能。

使用 Mixins

Mixins 是一種在不擴充套件的情況下使用類 A 中類 B 的不同方法。

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

Mixins 新增到控制器中，我們在其中宣告所有其他類，例如 store、view 等。透過這種方式，我們可以呼叫 DepartmentUtils 類並在控制器或此應用程式中使用其函式。