Ext.define('Ext.ux.Dropupload', {
extend: 'Ext.panel.Panel',
alias: 'widget.dropupload',
alternateClassName: 'Ext.panel.Dropupload',
option: null,//参数(url是必填值)
dropz: null,//拖拽组件
initComponent : function(){
var me = this;
me.addEvents('resize');
me.callParent(arguments);
me.on({
resize: me.onResize,
scope: me
});
},
finishRenderChildren: function () {
this.callParent();
},
onRender: function() {
var me = this;
me.inputEl = document.createElement('div');
me.inputEl.className = 'dropzone';
me.InnerId=Ext.id();
me.inputEl.id=me.InnerId;
document.body.appendChild(me.inputEl);
if (me.option) {
me.dropz = new Dropzone("div#"+me.InnerId, me.option);
me.dropz.on("complete", me.onComplete);
}
me.inputEl.style.height="100%";
me.inputEl.style.width="100%";
me.contentEl=me.InnerId;
me.callParent(arguments);
},
onDestroy: function(){
var me = this;
if(me.rendered){
try {
Ext.EventManager.removeAll(me.dropz);
for (prop in me.dropz) {
if (me.dropz.hasOwnProperty(prop)) {
delete me.dropz[prop];
}
}
}catch(e){}
}
me.callParent();
},
onComplete: function(file){
//需自定义
}
});
//使用
Ext.create('Ext.ux.Dropupload', {
autoScroll: true,
option: {
url: '',
paramName: 'Attached',
maxFiles: 10,
maxFilesize: 512,
acceptedFiles: ".bmp,.jpg,.png,.gif,.pdf",
thumbnailWidth: 800,
thumbnailHeight: 600,
dictDefaultMessage: "将确认件拖至此处或点击上传"
},
//完成上传
onComplete: function(data) {
if(data){
//返回参数
var res = JSON.parse(data.xhr.responseText);
Ext.Ajax.request({
url:'',
method:'post',
params:{
},
success: function(re, opts) {
},
failure: function(re){
console.log(re.responseText);
}
});
}
}
});