事隔幾天繼續開寫，由於水平所限理論的東西寫起來的確很費勁，現在就將就着寫吧，等后邊的實踐部分或許會好點。今天主要講講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>
最后來個效果圖吧：
