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

Question

I'm attempting to integrate the http://www.dropzonejs.com/ file uploader into an existing ExtJS 3.4 application. I'm running into problems, as the elements created by ExtJS do not seem to be available using native document. methods, used by DropzoneJS.

I want to render the upload panel inside a dynamically created ExtJS window:

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 is throwing an error "Invalid dropzone element" immediately, as it's trying to access my target window element using document.querySelector() . Here are the lines in throwing the error in the source code:

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

Any ideas how I can achieve this without modifying the Dropzone.js source?

Answer 1

I think the problem is that you are trying to access elements before panel is rendered, so that will never give you elements

use afterrender event to initialize 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);