因工作需要，繼承button自定義一個上傳下載的按鈕控件，因爲框架封裝，和原生的ExtJs可能稍有出入，但是也希望能對後來者有一定的啓發。現將代碼以及最終效果附上。
ExtJs代碼：
Ext.define("Gzjg.Component.JUploadAndDownload", {//自定義的上傳下載控件，點擊彈出一個窗口，可以上傳或者下載文件
extend: "Scdp.form.JButton",
mixins: ["Scdp.form.JHidden"],
alias: ["widget.JUploadAndDownload"],
width:60,
iconCls:"temp_icon_16",
validateOnBlur:!1,
fileNumber:10,
fileUploadAction:"file-ftp-upload",
fileDeleteAction:"file-ftp-delete",
fileDownloadAction:"file-ftp-download",
fileType:"txt|zip|rar|png|jpg|bmp|jpeg|doc|docx|xlsx|xls|cvs",
fileTypeValidate:!1,
fileTypeError:"文件類型錯誤，請重新選擇！支持文件類型有：文檔、壓縮包、圖片、excel等。",
callBack:null,
initComponent:function(){
this.width=60;
this.callParent(arguments);
this.initObjEvents(this);
var me = this;//定義指向這個控件的指針方便在方便在事件中調用，然後綁定點擊事件
this.on("click",function(event){
var status = event.up("IView").uistatus;//獲得當前的頁面狀態
var filePkMappings = event.gotValue();//獲得控件的文件mapping值
if(status==""||status==null||status==undefined)//檢查頁面狀態是否正常
{
Scdp.MsgUtil.info("未知的界面狀態!");
return;
}
if((status == Scdp.Const.UI_INFO_STATUS_MODIFY)||(status == Scdp.Const.UI_INFO_STATUS_NEW) ||(status==Scdp.Const.UI_INFO_STATUS_VIEW)){//附件編輯狀態
var formTitle ="";//Window標題
var formCallBack = null;//Window回調函數
var formView = null;//Window表單
var formItems = new Array();//表單Item
var filePks = new Array();//關聯文件數組
if(me.strIsAvaliable(filePkMappings))//有關聯的文件
{
filePks = Scdp.StrUtil.trim(filePkMappings).split("|");//獲得文件Mapping數組
}
if((status == Scdp.Const.UI_INFO_STATUS_MODIFY)||(status == Scdp.Const.UI_INFO_STATUS_NEW)){//編輯狀態
var fileColumn = filePks.length;
if(filePks.length>0){//如果有綁定文件，加載文件使其可刪除
Ext.each(filePks, function (file,index) {
var fileArr = file.split(":");
formItems.push(
{
layout: 'column',
cid:'column'+index,
border: 0,
items:
[
{
xtype: 'JButton',
text: '<font color="blue">'+fileArr[1]+'</font>',
cid: 'download'+index,
value:fileArr[0],
iconCls:'file_btn',
border: false,
style: {
'text-decoration': 'underline',
},
listeners: {
click: function () {
var postData = {};
postData.pk = this.value;
Scdp.doPost(me.fileDownloadAction, postData, function (retData) {
if (retData.success) {
Scdp.MsgUtil.info("下載完成！");
}
});
}
}
},
{
xtype: 'JButton',
text: '',
value:fileArr[0],
valueDesc:index,
cid: 'delete' + index,
iconCls:'delete_file_red_btn',
listeners: {
click: function (e) {
Scdp.MsgUtil.confirm("是否確定刪除該文件？一旦刪除將不可恢復且必須保存此次修改數據！",function(result){
if("yes"==result){
var postdata = {};
postdata.filePk = e.value;
Scdp.doAction(me.fileDeleteAction, postdata, function(rlt){//數據庫刪除文件
if(rlt.success){
Scdp.MsgUtil.info("刪除成功！");
//面板移除一行，並且重置FileMapping.
var deleteColumn = formView.getCmp("column"+ e.valueDesc);
formView.remove(deleteColumn);
formView.doLayout();
//重置mapping value
Ext.each(filePks,function(pk,index){
var tmpPk=pk.split(":");
if(tmpPk[0]==e.value){
filePks.splice(index,1);//移除該位置的pk
fileColumn--;
}
});
//重新拼接filePkLst
filePkMappings=filePks.join("|");
me.sotValue(filePkMappings,null,null,true);//賦值
if(fileColumn==(me.fileNumber-1)){
formView.add(fileItems);
formView.doLayout();
}
}
});
}
});
}
}
}
]
});
});
}
var fileItems = {//上傳文件的Item
layout: 'column',
cid:'column',
border: 0,
items:[{
xtype: 'JFile',
cid:'uploadFile',
fieldLabel: Scdp.I18N.UPLOAD_FILE_NAME,
fileType:me.fileType,
fileTypeValidate:me.fileTypeValidate,
fileTypeError:me.fileTypeError,
listeners:{
change:me.fileSelect
}
},{
xtype: 'JButton',
text: '添加',
iconCls:'add_file_btn',
listeners:{
click:function(e)
{
if(fileColumn<me.fileNumber-1){
var newColumn = Ext.widget("JPanel",{
layout: 'column',
border: 0,
items:[{
xtype: 'JFile',
cid:'uploadFile'+fileColumn,
fieldLabel: Scdp.I18N.UPLOAD_FILE_NAME,
fileType:me.fileType,
fileTypeValidate:me.fileTypeValidate,
fileTypeError:me.fileTypeError,
listeners:{
change:me.fileSelect
}}]
});
formView.add(newColumn);
formView.doLayout();
fileColumn++;
}
else{
Scdp.MsgUtil.info("對不起，您最多可以添加"+me.fileNumber+"個附件！");
}
}
}
}]
};
if(fileColumn<me.fileNumber){//壓入上傳文件的Item
formItems.push(fileItems);
}
formCallBack = function (subView){//編輯狀態的回調函數
var postdata = {};
Scdp.doAction(me.fileUploadAction, postdata, function(rlt){
if(rlt.success){
var lstPks = rlt.lstPks;
for(var pk in lstPks){
if(filePkMappings!=""){
filePkMappings = filePkMappings+"|"+pk+":"+lstPks[pk];
}
else{
filePkMappings=pk+":"+lstPks[pk];
}
}
me.sotValue(filePkMappings,null,null,true);
win.close();
}
}, null, null, null, subView.getForm());
};
formTitle = "上傳文件";
}
else{//查看狀態Items
if(!me.strIsAvaliable(filePkMappings))//檢查是否有附件
{
Scdp.MsgUtil.info("沒有附件!");
return;//沒有附件，中斷執行
}
Ext.each(filePks,function(file,index){//載入下載文件欄目
var fileArr = file.split(":");
formItems.push({
layout: 'column',
border: 0,
items: [{
xtype: 'JButton',
text: '<font color="blue">'+fileArr[1]+'</font>',
cid: 'download'+index,
value:fileArr[0],
iconCls:'file_btn',
border: false,
style: {
'text-decoration': 'underline',
},
listeners: {
click: function () {
var postData = {};
postData.pk = this.value;
Scdp.doPost(me.fileDownloadAction, postData, function (retData) {
if (retData.success) {
Scdp.MsgUtil.info("下載完成！");
}
});
}
}
}]
});
}
);
formCallBack = function () {//查看狀態回調函數
win.close();
};
formTitle = "下載文件";
}
//構建彈出框window,items爲以上構建的items
formView = Ext.widget("JForm", {
height: 200,
width: 500,
layout: 'form',
autoScroll:true,
bodyPadding: '10 10 10 10',
cid: 'uploadForm',
items: formItems
});
var win = Scdp.openNewWinByView(formView, formCallBack, 'temp_icon_16', formTitle);
}
else if(status == Scdp.Const.UI_INFO_STATUS_NULL)
{
Scdp.MsgUtil.info("沒有選擇記錄！");
}
});
},
setFilePks:function(arr){
this.filePks=arr;
},
setFileNames:function(arr){
this.fileNames=arr;
},
getFilePks:function(){
return this.filePks;
},
getFileNames:function(){
return this.fileNames;
},
beforUpload:function(){
var me = this;
return !0;
},
afterUpload:function(){
var me = this;
return !0;
},
strIsAvaliable:function(str){
return (Scdp.StrUtil.trim(str)!="" && (str!="") && (str != null) && (str!=undefined))
},
sotValue: function (a, b,c,d) {
var status = this.up("IView").uistatus;
if(status == Scdp.Const.UI_INFO_STATUS_NEW && !d){
a="";
}
this.setValue(a);
this.cascadeLoad(!1);
c && (this.oldValue = this.gotRawValue());
b || this.afterSotValue && this.afterSotValue(this)
},
fileSelect:function (event){
var files = event.fileInputEl.dom.files;
if(files.length>0){
var file = files[0];
var size = file.size;
if(event.fileTypeValidate){
var nameSplit = file.name.split(".");//限制上傳文件類型
var type=nameSplit[nameSplit.length-1];
if(!(event.fileType.indexOf(type)>-1)){
event.reset();
Scdp.MsgUtil.info(event.fileTypeError);
return;
}
}
if(size>10485760){
Scdp.MsgUtil.info("附件最大隻支持10M的文件，請重新選擇！");
event.reset();
return;
}
}
},
});該控件是將文件上傳到後臺服務器後把後臺返回的文件key以及名字以"key1:name1|key2:name2"的方式作爲value保存。同時可以上傳多個文件。最終效果圖如下：
