Extjs4 封装dropzonejs组件 2016.12.29

最新推荐文章于 2023-12-05 22:44:46 发布

重庆-传说

最新推荐文章于 2023-12-05 22:44:46 发布

阅读量888

点赞数

分类专栏： Extjs Extjs4 开发经验

原创不易，白嫖不好，如果有用，请点赞，让更多的朋友看到这篇文章。

本文链接：https://blog.csdn.net/zdb330906531/article/details/53926343

版权

本文介绍如何在ExtJS4中封装Dropzone.js组件，用于实现文件拖拽上传功能。详细展示了组件的定义过程，包括事件监听、参数配置及上传完成后的处理方法。示例代码展示了一个具有自定义参数、限制文件类型和数量、以及上传成功后的回调处理。

摘要由CSDN通过智能技术生成

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);