Ext.js - 架構

Ext JS 遵循 MVC/ MVVM 架構。

MVC − 模型檢視控制器架構（版本 4）

MVVM − 模型檢視檢視模型（版本 5）

此架構對於程式不是強制性的，但是，遵循此結構是最佳實踐，可以使您的程式碼易於維護和組織。

使用 Ext JS 應用的專案結構

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Ext JS 應用資料夾將位於專案的 JavaScript 資料夾中。

該應用將包含控制器、檢視、模型、儲存和實用程式檔案以及 app.js。

app.js − 程式流程將從該主檔案開始，應使用 <script> 標籤將其包含在主 HTML 檔案中。應用呼叫應用的控制器以執行其餘功能。

Controller.js − 它是 Ext JS MVC 架構的控制器檔案。它包含應用的所有控制、事件監聽器和大部分程式碼功能。它為該應用中使用的所有其他檔案（如儲存、檢視、模型、require、mixins）定義了路徑。

View.js − 它包含應用的介面部分，顯示給使用者。Ext JS 使用各種 UI 富檢視，可以在這裡根據需要擴充套件和自定義。

Store.js − 它包含本地快取的資料，這些資料將使用模型物件呈現到檢視上。儲存使用代理獲取資料，代理為服務定義了路徑以獲取後端資料。

Model.js − 它包含將儲存資料繫結到檢視的物件。它具有後端資料物件到檢視 dataIndex 的對映。資料是藉助儲存獲取的。

Utils.js − 它不包含在 MVC 架構中，但使用它是最佳實踐，可以使程式碼更簡潔、更簡單且更易讀。我們可以在此檔案中編寫方法，並在需要時在控制器或檢視渲染器中呼叫它們。它也有助於程式碼重用。

在 MVVM 架構中，控制器由 ViewModel 替換。

ViewModel − 它基本上在檢視和模型之間仲裁更改。它將資料從模型繫結到檢視。同時，它與檢視沒有任何直接互動。它只瞭解模型。

工作原理

例如，如果我們在 UI 中的兩個或三個地方使用一個模型物件。如果我們在 UI 的一個地方更改值，我們無需儲存即可看到該更改。模型的值發生更改，因此會反映在 UI 中的所有使用模型的地方。

它使開發人員的工作量大大減少，因為無需為資料繫結編寫額外的程式碼。