ExtJS 上传下载控件

因工作需要，继承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,

b6ce
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保存。同时可以上传多个文件。最终效果图如下：