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

前言

圖片管理要在兩個地方使用：一是標簽頁內的圖片管理，一是文章內容編輯時嵌套到插入圖片的窗口內。因而，將圖片管理做成一個擴展比較方便。當然，做成MVC模式也行，不爭論，不討論。

要記住，擴展要寫在Scripts\ExtJS\Ux目錄下，因為在路徑的設置中，擴展目錄是指向這里的。在該目錄下創建一個名為PicManager.js的腳本文件。

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

上傳文件將使用Swfupload，它可一次上傳多個文件，到http://code.google.com/p/swfupload/可下載到最新版本的文件，當前示例使用的是2.5.0 beta版本。先下載SWFUpload_v250_beta_3_samples.zip這個文件，解壓后，把demos目錄下的swfupload目錄復制到解決方案的Scripts目錄下。然后下載swfupload.swf.v2.5.0.beta3.2.zip文件，把該文件里的文件覆蓋swfupload目錄下的文件。

正題

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

        Ext.define("Folder", {
            extend: "Ext.data.Model",
            fields: ["text", "id", "parentId"],
            validations: [{
                type: 'presence',
                field: 'text'
            }],
            proxy: {
                type: 'ajax',
                api: {
                    read: 'Folder/List',
                    create: 'Folder/Add',
                    destroy: 'Folder/Delete',
                    update: 'Folder/Edit'
                },
                reader: {
                    messageProperty: "Msg",
                    type: 'json',
                    root: "data"
                },
                writer: {
                    type: "json",
                    encode: true,
                    root: "data",
                    allowSingle: false
                },
                listeners: {
                    exception: ExtMVCOne.ProxyException
                }
            }
        });

定義中，parentId用來記錄父目錄。添加一個驗證項，目錄名稱不能為空。在代理定義中，reader和writer的定義可標准化數據的輸入輸出，這個與用戶中的定義是一樣的。代理的API則定義了操作的提交路徑。

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

        me.treestore = Ext.create("Ext.data.TreeStore", {
            root: { id: "/", text: "根目錄", expanded: true },
            model: "Folder"
        });

TreeStore的定義，除了模型，很重要的一個定義就是根節點了。這里根節點的id使用“/”，是為了方便后台將虛擬路徑轉換為實際路徑。

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

        me.tree = Ext.widget("treepanel", {
            title: "文件目錄", region: "west", collapsible: true, rootVisible: true,
            width: 250, minWidth: 100, maxWidth: 500, split: true, store: me.treestore
        });

因為使用邊框布局，因而要混入邊框布局的配置項。這里還設置了顯示根目錄，這是因為系統將允許在根目錄上傳文件。

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

        Ext.define('File', {
            extend: 'Ext.data.Model',
            fields: [
                'filename', 'path',
                "modify",
                { name: "size", type: "int" }
             ]
        });

這里的字段，除了文件名、路徑是必須的，其它的可根據自己的顯示內容定義。在這里將顯示最后編輯時間、文件大小。

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

        me.filestore = Ext.create("Ext.data.Store", {
            batchActions: false,
            remoteFilter: false,
            remoteSort: false,
            pageSize: 50,
            model: "File",
            proxy: {
                type: "ajax",
                api: {
                    read: 'File/List',
                    destroy: 'File/Delete'
                },
                reader: {
                    type: 'json',
                    root: "data"
                },
                writer: {
                    type: "json",
                    encode: true,
                    root: "data",
                    allowSingle: false
                },
                listeners: {
                    exception: SimpleCMS.ProxyException
                }
            }
        });

這里的API沒有create和update配置項是因為，文件是上傳的，不能通過該方式提交，而文件一般也不進行更新，而是先刪除后再上傳。

接着是用數據視圖來顯示文件，代碼如下：

        me.dataview = Ext.widget("dataview", {
            store: me.filestore, autoScroll: true,
            multiSelect: true, selectedItemCls: "selected", itemSelector: 'div.imageList',
            overItemCls: "overitem", trackOver: true,
            tpl: [
                '<tpl for=".">',
                    '<div class="imageList">',
                        '<img width="160" height="160" src="../Thumbnail{path}{filename}?width=160&height=160" data-qtip="文件名：{filename}<br/>修改日期：{modify}<br>大小：{size:this.filesize}" /><br/>',
                        '<p class="ellipsis">{filename}</p>',
                    '</div>',
                '</tpl>',
                '<div class="x-clear"></div>',
                {
                    filesize: function (size) {
                        if (size < 1024) {
                            return v + " 字節";
                        } else if (size < 1048576) {
                            return (Math.round(((size * 10) / 1024)) / 10) + " KB";
                        } else {
                            return (Math.round(((size * 10) / 1048576)) / 10) + " MB";
                        }
                    }
                }
            ]
        });

定義數據視圖的關鍵就是模板的定義，這個在書中有詳細說明和示例，這里就不詳細說了。在這里在模板添加了一個filesize方法，用來轉換文件大小的顯示格式。

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

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

        me.items = [
            me.tree,
            { title: "圖片文件", region: "center", layout: 'fit', items: [me.dataview] }
        ];

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

                        var view = Ext.create('Ext.ux.PicManager', {});
                        var view = Ext.widget("picmanager");
                        panel.add(view);

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

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

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