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。

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

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com