Question

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

我想在动态创建的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源的情况下实现这一目标的任何想法？

Answer 1

我认为问题在于您在渲染面板之前尝试访问元素，因此永远不会为您提供元素

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

如何使用`document.querySelector（）`访问ExtJS元素？

1 个答案: