一步一步使用Ext JS MVC與Asp.Net MVC 3開發(fā)簡單的CMS后臺管理系統(tǒng)之創(chuàng)建Viewport（2）

現(xiàn)在要考慮的是如何加載標簽頁內(nèi)的內(nèi)容。雖然標簽頁默認是延遲渲染的（deferredRender值默認為true），但是它會預加載所有的類， 因而當類文件很多的時候，加載時間就是一大問題了。這個，也可通過SDK打包的方式解決，不過在設計階段還是要考慮的。另一種好的解決方法是，只使用標簽 頁的標簽，而不使用其主體加載內(nèi)容，另外使用一個容器，內(nèi)部使用CardLayout作為布局，類似書中最后一章的示例實現(xiàn)面板內(nèi)容的加載和切換。

在 這里，將展示另一種方式，就是在標簽頁激活時才去加載內(nèi)容頁。因而，這需要監(jiān)聽標簽頁的activate事件。這樣，問題又來了，是在標簽頁面板監(jiān)聽 activate事件，還是在每個獨立的標簽頁內(nèi)監(jiān)聽activate事件。如果是在標簽頁面板內(nèi)監(jiān)聽，就要判斷當前標簽頁的哪一個，是否需要加載內(nèi)容， 因為文章的詳細信息頁也是標簽頁，因而這些都需要做判斷。這個，筆者因為雖然寫法簡化了，但是要做的判斷實在太多，不算太好的方法。而在具體標簽頁內(nèi)監(jiān) 聽，則不需要任何判斷，而且可以設置事件為一次性性事件，也就是在監(jiān)聽時設置事件的single配置項為true，這樣監(jiān)聽事件在執(zhí)行一次后就會自動刪 除，不再監(jiān)聽了。

要在Viewport內(nèi)為各標簽頁添加activate事件，就不太符合MVC要求了。是的，這個在頂部實現(xiàn)退出按鈕的時 候已經(jīng)違反要求了。因而都需要做出修改。不過，筆者也曾思前想后的考慮過，開發(fā)應用程序，是否就要這么刻板呢？尤其是像退出這樣簡單的操作，而且對于 Javascript這樣靈活的語言。這個，如果探討起來，就和語言之爭一樣沒什么意義了，大家還是根據(jù)自己習慣，靈活掌握吧。

為了實現(xiàn)標簽頁的MVC化，先在view目錄下創(chuàng)建一個名稱為MainPanel.js的文件，在文件里定義一個擴展于標簽面板的控件，基本代碼如下：

使用配置項alias來為組件定義一個別名非常有必要，不然在Viewport就不能使用xtype來創(chuàng)建組件了，在這里，別名是mainpanel。在initComponet方法內(nèi)，將Viewport創(chuàng)建mainpanel實例的代碼復制過來，并修改如下：

因 為是在組件內(nèi)，所以將標簽頁加到items里就行了。要注意，所有標簽頁都添加了id，其目的是為了方便在控制器中找到面板，當然，這個使用其它方式獲取 也行，只是這樣的方式是最快最直接的。這個可根據(jù)項目具體情況再做決定。還要注意，添加用戶管理標簽頁時，用的是數(shù)組的push方法，而不是面板的add 方法了。

現(xiàn)在，在Controller目錄創(chuàng)建一個名稱為MainPanel.js的腳本文件，用來定義主面板的控制，基本定義代碼如下：

因為控制器里不需要引用組件，也不需要模型和Store，因而沒有定義refs、store和model配置項，只是定義了init方法。在init方法內(nèi)，需要使用控制器的control方法來獲取主面板內(nèi)的標簽頁，并為其添加activate事件，具體代碼如下：

代 碼中，對象中的關(guān)鍵字就是選擇器，用來查找組件用的，在這里要使用id來查找，因而在組件id前面要添加“#”符號，表示使用id查找組件。在組件內(nèi)，綁 定了activate事件，事件中，single配置項說明該事件只執(zhí)行一次，配置項fn則是事件的回調(diào)函數(shù)，目前只是簡單的顯示返回的面板對象。

在 這里，沒有使用權(quán)限添加用戶面板的原因是，如果找不到組件，它不會做任何處理，因而不使用權(quán)限添加也沒問題的，不像可視組件內(nèi)，如果不限制，就會顯示出 來。在這里，一般都會擔心，這會不會造成安全問題？被利用來實現(xiàn)無權(quán)限的操作，這個其實不用擔心，就算它能看到顯示的組件，但是我后臺通過權(quán)限控制返回的 數(shù)據(jù)，它沒有權(quán)限，是看不到任何數(shù)據(jù)的，也不能對沒權(quán)限的數(shù)據(jù)進行任何操作。

控制器定義好以后，切換會Viewport.js，先添加一個requires配置項，讓其自動加載MainPanel，代碼如下：

這句是必須的，不然會找不到組件。

然后將之前添加mainpanel的代碼全部刪除，在items內(nèi)原來添加主面板的位置添加以下代碼來添加主面板視圖：

在這里，也加了一個id，也是為了方便以后使用選擇器查找組件。

因為要加載主面板的控制器，所以要在首頁Index.cshtml使用application方法創(chuàng)建應用時添加controllers配置項，代碼如下：

這樣，就可自動加載主面板的控制器了。

現(xiàn)在，在瀏覽器中打開首頁，使用test用戶登錄，會看到界面和之前看到的沒有區(qū)別。如果打開了Firebug，會看到以下顯示：

這說明activate事件已被觸發(fā)了，不相信？可以在activate事件內(nèi)添加別的東西來做個驗證。

單擊一下圖片管理，會看到Firebug里又多了以下信息：

說明圖片管理面板的activate也被觸發(fā)了。

現(xiàn)在再切換回文章管理，會發(fā)現(xiàn)不再有提示信息了，原因就是activate事件設置了配置項single為true，它只會執(zhí)行一次。

好了，Viewport到此就已經(jīng)完成了?，F(xiàn)在的重點是如何在主面板控制器內(nèi)控制內(nèi)容的加載了。

源代碼下載地址：http://download.csdn.net/detail/tianxiaode/4590190