因為最近項目當中需要用ext js 4做前端框架，所以就必須得學習它了。這個系列主要總結ext js MVC框架，這是ext js 4新增的開發模式，這篇文章主要從以下幾點來進行總結。
1，項目目錄結構
2，相關css文件和js文件引用
3，MVC框架整體認識
項目目錄結構
Ext js 4遵循統一的目錄結構，這個有點類似於ASP.NET MVC。MVC中，所有的類都放在app目錄中，這個目錄下有四個子目錄(每個子目錄代表一個命名空間)，主要有controller,model,view和store。完成后的目錄結構圖如下：
相關css文件和js文件引用
要正常使用ext js，我們要在首頁的head標簽中引用ext-all.css，bootstrap.js和項目的入口app.js文件，具體如下圖所示。
MVC框架整體認識
為了對Ext js的MVC開發模式有一個整體的認識，我們先來看一張圖，然后再具體說明。
1，每個應用都有一個實體，就是Application對象，而每個應用同樣采用單一入口結構，有個快捷函數就是Ext.application({config})，創建一個Application對象實例，並且運行它。Application在創建之初，會去加載Controller類，加載完畢后，會正式的lunch。
2，Application在lunch的時候，會創建一個Viewport實例，這個東西就像一個骨架一樣，上面可以拼裝各種View，具體說，就是各種布局形式和窗體控件，可以說是view界面的載體，一個頁面只能有一個Viewport實例。
4，View純粹是一個界面組件，或者說窗體控件的集合（比如form,grid和window）。通過Store來加載數據並且展現到界面上，界面控件的響應都寫在Controller里面，View對Controller的存在全無所知，也沒有代碼上的依賴。
5，Controller的角色完全是個粘合劑，它在加載之初，會幫忙加載跟其有關的Model，Store，View類，而其真正的作用，是通過一系列的事件處理函數(比如點擊保存按鈕)，確定了每個View上面界面組件對用戶交互行為的響應方法，可以說是一堆事件處理器函數的集合；這里面主要通過一個control成員函數來進行事件綁定，通過另一個叫ComponentQuery的組件，使用類似css selector的語法來定位界面上的組件，並為其綁定事件處理器。
6，Model是對抽象數據的具體化，簡單理解就是數據庫里面的一行記錄。
7，Store是對通過網絡加載數據的過程的一個抽象，Store通過data發送請求(一般為ajax請求)到后台獲取數據(一般返回json格式)，Store依賴於Model，通過關聯的Model對象才知道如何將取回的數據對象化。
總結一下，感覺MVC架構的好處在於，將View和Model都給抽象了出來，以至於它們可以更好地被復用，做好一個面板，所有的地方都可以調用，而真正業務邏輯又被很好的封裝在了Controller里面，這樣也便於去模塊化地開發系統。
下在篇將介紹如何利用Application，Viewport和view進行應用程序的初始化和頁面布局。