如何使用'document.querySelector(）'访问ExtJS元素

How can I access ExtJS elements using `document.querySelector()`?

本文关键字：访问 ExtJS 元素 document 何使用 querySelector      更新时间：2023-09-26

我正在尝试将 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 源的情况下实现这一目标？

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

使用 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);
相关文章：