ExtJS 基本介紹 - 5. MVC Architecture

此篇文章主要參考ExtJS官方網站文件後記錄,因此圖形與內容有部分直接引用官網資料.

ExtJS是利用MVC-like的一套Application Architecture,用以組織(或者說限制)你的程式碼,同時也提供現成的功能來輔助開發,降低寫程式的量.

• Model - 在此定義成一個資料集合,在此模組內能夠保存資料提供其他模組或其他Model引用.
• View -  所有的Components (Grid,Tree,Panel...).
• Control - 由Programming負責開發Application運作邏輯與控制Model/View.

ExtJS架構的優點:

• 所以Application運作方式皆採用相同手法,只需要入門就都適用.
• 很容易分享程式碼,因為手法相同.
• 可以利用ExtJS Builder Tool最佳化程式.

ExJS MVC 檔案結構:

MVC Example:

設計一個User列表Grid畫面,在連擊Item Row的時,開啟編輯視窗提供修改,並且在點選儲存時,以JSON方式呼叫Server端.

在上述的設計架構下,需分別定義:

• Model - 設計User結構.
• View - 設計List畫面、Edit畫面.
• Store - 設計與Server端溝通(JSON)與對應網址.
• Control - 將UI畫面與Model進行綁定,並讓UI事件設計如何呼叫Store,以取得/更新Server Side資料.