Can I use Ext's loader to load non-ext scripts/object dynamically?

Question

In my ExtJS 4.0.7 app I have some 3rd party javascripts that I need to dynamically load to render certain panel contents (some fancy charting/visualization widgets).

I run in to the age-old problem that the script doesn't finish loading before I try to use it. I thought ExtJS might have an elegant solution for this (much like the class loader: Ext.Loader).

I've looked at both Ext.Loader and Ext.ComponentLoader, but neither seem to provide what I'm looking for. Do I have to just "roll my own" and setup a timer to wait for a marker variable to exist?

Answer 1

Here's an example of how it's done in ExtJS 4.1.x:

Ext.Loader.loadScript({
    url: '...',                    // URL of script
    scope: this,                   // scope of callbacks
    onLoad: function() {           // callback fn when script is loaded
        // ...
    },
    onError: function() {          // callback fn if load fails 
        // ...
    } 
});

Answer 2

I've looked at both Ext.Loader and Ext.ComponentLoader, but neither seem to provide what I'm looking for

Really looks like it's true. The only thing that can help you here, I think, is Loader's injectScriptElement method (which, however, is private):

var onError = function() {
  // run this code on error
};
var onLoad = function() {
  // run this code when script is loaded
};
Ext.Loader.injectScriptElement('/path/to/file.js', onLoad, onError);

Seems like this method would do what you want (here is example). But the only problem is that , ... you know, the method is marked as private.

Answer 3

This is exactly what newest Ext.Loader.loadScript from Ext.4-1 can be used for.

See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Loader-method-loadScript