1

我正在尝试将http://www.dropzonejs.com/文件上传器集成到现有的 ExtJS 3.4 应用程序中。我遇到了问题，因为 ExtJS 创建的元素似乎无法使用document.DropzoneJS 使用的本机方法获得。

我想在动态创建的 ExtJS 窗口中呈现上传面板：

App.DropzoneWindow = function(config) {
    config = config || {};
    Ext.applyIf(config, {
        url: App.config.connectorUrl
        ,dropzone: null
        ,base_params: {}
    });
    OB.DropzoneWindow.superclass.constructor.call(this, config);
    this.dropzone = this.initDropzoneJs();
};
Ext.extend(App.DropzoneWindow, App.Window, {
    initDropzoneJs: function() {
        var config = {
            url: this.url
        };
        return new Dropzone('div#'+this.id, config);
    }
});
Ext.reg('app-dropzone-window', App.DropzoneWindow);

Dropzone.js 立即抛出错误“无效的 dropzone 元素”，因为它试图使用document.querySelector(). 以下是在源代码中抛出错误的行：

https://github.com/enyo/dropzone/blob/master/downloads/dropzone.js#L636-L640

有什么想法可以在不修改 Dropzone.js 源的情况下实现这一目标吗？

4

1 回答 1

2

我认为问题是你试图在面板呈现之前访问元素，所以这永远不会给你元素

使用 afterrender 事件初始化 DropZone.js

App.DropzoneWindow = function(config) {
    config = config || {};
    Ext.applyIf(config, {
        renderTo : Ext.getBody(),
        listeners : {
             afterrender : this.initDropzoneJs,
             scope : this
        }
    });

    OB.DropzoneWindow.superclass.constructor.call(this, config);
};
Ext.extend(App.DropzoneWindow, App.Window, {
    initDropzoneJs: function() {
        var config = {
            url: this.url
        };
        return new Dropzone('div#'+this.id, config);
    }
});
Ext.reg('app-dropzone-window', App.DropzoneWindow);
于 2013-10-11T20:06:51.747 回答