javascript - 如何使用 `document.querySelector()` 访问 ExtJS 元素？

Question

我正在尝试整合 http://www.dropzonejs.com/文件 uploader 到现有的 ExtJS 3.4 应用程序。我遇到了问题，因为使用 DropzoneJS 使用的 native document. 方法似乎无法使用 ExtJS 创建的元素。

我想在动态创建的 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);