Extjs-architecture
提供：Dev Guides
Ext.js-アーキテクチャ
Ext JSはMVC/MVVMアーキテクチャに従います。
*MVC* -Model View Controllerアーキテクチャ（バージョン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 filesExt JSアプリフォルダーは、プロジェクトのJavaScriptフォルダーにあります。
アプリには、app.jsを含むコントローラー、ビュー、モデル、ストア、およびユーティリティファイルが含まれます。
*app.js* -プログラムのフローが開始されるメインファイル。<script>タグを使用してメインHTMLファイルに含める必要があります。 アプリは、残りの機能のためにアプリケーションのコントローラーを呼び出します。*Controller.js* -Ext JS MVCアーキテクチャのコントローラーファイルです。 これには、アプリケーションのすべての制御、イベントリスナー、およびコードのほとんどの機能が含まれます。 ストア、ビュー、モデル、必要、ミックスインなど、そのアプリケーションで使用される他のすべてのファイルに対して定義されたパスがあります。*View.js* -アプリケーションのインターフェース部分が含まれ、ユーザーに表示されます。 Ext JSはさまざまなUIリッチビューを使用します。これらのビューは、要件に応じてここで拡張およびカスタマイズできます。*Store.js* -モデルオブジェクトの助けを借りてビューにレンダリングされるローカルにキャッシュされたデータが含まれています。 ストアは、バックエンドデータを取得するサービス用に定義されたパスを持つプロキシを使用してデータを取得します。*Model.js* -表示するストアデータをバインドするオブジェクトが含まれています。 ビューdataIndexへのバックエンドデータオブジェクトのマッピングがあります。 データは、ストアを使用して取得されます。*Utils.js* -MVCアーキテクチャには含まれていませんが、コードをクリーンで複雑さを抑え、読みやすくするためのベストプラクティスです。 このファイルにメソッドを記述し、必要に応じてコントローラーまたはビューレンダラーでメソッドを呼び出すことができます。 コードの再利用性の目的にも役立ちます。MVVMアーキテクチャでは、コントローラーはViewModelに置き換えられます。
*ViewModel* -基本的にビューとモデル間の変更を仲介します。 モデルからのデータをビューにバインドします。 同時に、ビューとの直接的な相互作用はありません。 モデルの知識しかありません。使い方
たとえば、UIの2〜3か所で1つのモデルオブジェクトを使用している場合。 UIの1つの場所で値を変更すると、その変更を保存しなくても確認できます。 モデルの値は変化するため、モデルを使用する場所に関係なく、UIのすべての場所に反映されます。
データのバインドに余分なコーディングが必要ないため、開発者の労力ははるかに少なく簡単になります。
