ExtJs十一(ExtJs Mvc圖檔管理之一)

前言

圖檔管理要在兩個地方使用：一是标簽頁内的圖檔管理，一是文章内容編輯時嵌套到插入圖檔的視窗内。因而，将圖檔管理做成一個擴充比較友善。當然，做成MVC模式也行，不争論，不讨論。

要記住，擴充要寫在Scripts\ExtJS\Ux目錄下，因為在路徑的設定中，擴充目錄是指向這裡的。在該目錄下建立一個名為PicManager.js的腳本檔案。

片管理的主要界面分兩部分，左邊以樹的形式列出檔案目錄，要實作目錄的添加、删除和編輯功能，右邊則以預覽形式顯示目錄中的檔案，主要功能是上傳檔案和删除檔案。

正題

 現在先來完成左邊的目錄樹。使用樹，必然用到TreeStore，因而要從這裡入手。而TreeStore可定義模型，也可不定義模型，這個視情況而定。目前的情況是，目錄的添加、編輯和删除操作，都需要給出父目錄和目錄名稱，目錄名稱可使用字段text，父目錄則是一個附加字段。目錄的操作比較簡單，因而直接在模型内完成就行了，因而定義模型是比較好的方法。模型的定義可以獨立成一個檔案，也可以在initComponet方法内定義。如果在獨立的檔案定義，就要在擴充中添加requires配置項引用模型。這裡将在initComponet方法内定義，代碼如下：

定義中，parentId用來記錄父目錄。添加一個驗證項，目錄名稱不能為空。在代理定義中，reader和writer的定義可标準化資料的輸入輸出，這個與使用者中的定義是一樣的。代理的API則定義了操作的送出路徑。

接下來定義TreeStore，代碼如下：

TreeStore的定義，除了模型，很重要的一個定義就是根節點了。這裡根節點的id使用“/”，是為了友善背景将虛拟路徑轉換為實際路徑。

接着定義樹面闆，代碼如下：

因為使用邊框布局，因而要混入邊框布局的配置項。這裡還設定了顯示根目錄，這是因為系統将允許在根目錄上傳檔案。

現在來完成右邊的檔案預覽。還是先從模型開始，代碼如下：

這裡的字段，除了檔案名、路徑是必須的，其它的可根據自己的顯示内容定義。在這裡将顯示最後編輯時間、檔案大小。

接着是定義Store，代碼如下：

這裡的API沒有create和update配置項是因為，檔案是上傳的，不能通過該方式送出，而檔案一般也不進行更新，而是先删除後再上傳。

接着是用資料視圖來顯示檔案，代碼如下：

定義資料視圖的關鍵就是模闆的定義，這個在書中有詳細說明和示例，這裡就不詳細說了。在這裡在模闆添加了一個filesize方法，用來轉換檔案大小的顯示格式。

因為視圖不是面闆，沒有工具欄元件，因而要在其外面套一個面闆用來放置工具欄，是以在視圖的定義中沒有邊框布局的配置項。

下面來完成整個界面架構，代碼如下：

現在可以調試一下界面，看看怎麼樣了。先切換到主面闆（mainpanel.js）的視圖定義，為圖檔管理加回布局，布局類型為Fit。然後切換到主面闆的控制器，在圖檔管理的activate方法内，删除alert語句，添加以下代碼：

這裡一定要注意，create方法的第一參數必須為字元串，這樣，Ext才會去自動加載類檔案。也不能使用widget方法去建立，因為類還沒注冊，Ext不知道别名為picmanager指向的是那個類，也就不會去自動加載了。如果不使用這樣的方式，可在控制器中加入requires配置項，指定要加載該類，不過這與初衷相違了。

為了調試友善，可在主面闆視圖定義中加入配置項activeTab，用來指定初始激活顯示那個标簽頁，這樣就不用每次調試都要單擊一次标簽了。圖檔管理是第二個标簽頁，因而設定目前索引為1。

就這樣頁面就暫時加載出來了。