Extjs4快速上手二——基礎知識(二)

原文 http://www.cnblogs.com/good-temper/archive/2013/04/07/3003270.html

事隔幾天繼續開寫，由於水平所限理論的東西寫起來的確很費勁，現在就將就著寫吧，等後邊的實踐部分或許會好點。今天主要講講Extjs4的MVC。

1.1  談談MVC

　　MVC，這個概念或許算是當下最流行的設計模式，java中的SSH、SpringMVC，.net的MVC架構，php的smarty等，哪門語言不來個MVC架構都不好意思說自己是主流的。下邊是貼過來的一些MVC介紹。

　　MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟體設計典範，用於組織代碼用一種商務邏輯 和資料顯示分離的方法，這個方法的假設前提是如果商務邏輯被聚集到一個組件裡面，而且介面和使用者圍繞資料的互動能被改進和個人化定製而不需要重新編寫業務 邏輯MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化使用者介面的結構中。

　　簡單地說，採用MVC主要的目的是使資料（M）和視圖（V）分離，經過拓展後三部分的完成的任務如下：

　　Model：定義資料模型和商務規則，通常業務處理都放在這一層處理。如SSH中的model、dao和service。

　　View：視圖是使用者看到並與之互動的介面。如jsp、html。

　　Controller：控制器接受使用者的輸入並調用模型和視圖去完成使用者的需求。包括資料處理和視圖跳轉等，最典型的就是SSH中的struts了。

　　那麼MVC能帶來什麼好處呢？松耦合、便於重用、易於維護和拓展......。當然目前我唯一體會到的就是能使項目結構清晰，便於開發。

1.2  Extjs中的MVC

　　Extjs的MVC其實和上邊所介紹的並不完全符合，而且它的實現方式比較死板（當然死板有死板的好處，那就是你不用費心思再去設計結構了），下邊我們來詳細介紹。

　　

　　上邊是Extjs MVC的典型目錄，紅色是必須建立的，各檔案（夾）作用如下：

app　　　　　　　　　　　　　　　　//根目錄   controller　　　　　　　　　　//存放控制類的js,這裡的controller除了完成一般MVC中C的任務外，所有的業務也是在這層完成   model　　　　　　　　　　　　　//定義資料結構
　 store　　　　　　　　　　　　　//一個執行個體化的model集合,一般用來裝載列表等資料
　 view　　　　　　　　　　　　　 //不用多說，所有的視圖組件都放這兒就行
app.js　　　　　　　　　　　　　　//MVC的入口，內部調用Application類（即Ext的main），並載入controller

　　有人就說了，不就是按檔案夾把檔案分類嗎？如果僅僅如此Ext開發人員也不好意思提出這個模式了。它做到的遠遠不止如此。按照這樣建立以 後，Ext將自動按照目錄形成一個命名空間，而我們定義js類直接可以按照java中的包那樣進行訪問。可以先看一下app.js的一個例子：

Ext.Loader.setConfig({enabled: true});  　　　　//啟用動態載入，可以讓js檔案在需要用的時候再載入Ext.application({    name:'sxpt',　　　　　　　　　　　　　　　　　　//根命名空間    autoCreateViewport: true,　　　　　　　　　　 //自動建立Viewport，如不指定則需自己指定一個Viewport    appFolder:'manager/app',　　　　　　　　　　　//指定app根檔案位置，其內檔案將按命名空間訪問，如view/admin下的某視圖XX.js可訪問admin.XX即可,Extjs會自動將其定位　　　　　　　　　　　　　　　　　　　　　　　　　　　　 到view檔案加下    controllers:[　　　　　　　　　　　　　　　　　 //制定要載入的控制器        'Menu','admin.Student','admin.Teacher','admin.Project'    ]});

　　如代碼中注釋所言，建立好MVC模式之後，我們只需將對應的檔案放入對應檔案夾，而且相互之間引用直接使用命名空間即可，而不用指定檔案夾，這樣可以使js類結構更清晰，更符合物件導向編程。

　　最後我們應該如何啟動MVC呢？很簡單，只需在普通的頁面裡邊引入即可，項目中是在main.jsp引入的，我們直接存取main.jsp，Extjs就會自動載入。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>實訓管理平台</title>    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />    <link rel="stylesheet" type="text/css" href="css/style.css">    <script type="text/javascript" src="ext/ext-all.js"></script>     <script type="text/javascript" src="manager/app.js"></script>   </head>    <body>  </body></html>

　　最後來個吧：