add a third party library to ext js application lazily (that is only when it is required)

Question

I want to add a third party js to a sencha application, lazily, only when rendering a new window, for example on clicking a button, a new window is popped up, and when this happens the d3.js library js is also loaded.

For loading a new file in Ext js itself, we can use requires key:

requires : ['MyApp.stores.UserStore']

as described in extjs documentation. Can we do something like this for third party libraries also?

P.S. - I am using Ext Js 4.1.0

Answer 1

Update

You should be able to load nearly anything with Ext.Loader.loadScript(options) The method also provides a callback which is called when the loading is done.

---

Basically you can load anything as long as it is a single ExtJS class per file (I must admit that I never tried anything else!). You can register additional paths using

Ext.Loader.setPath('EL','your/path/name'); // not done in the example below!

and require something at runtime is quite easy as long as the loader is configured for that. Following is a example which loads the Ext.ux.statusbar.StatusBar at runtime from another domain and a complete new path. Here's the JSFiddle - just click the button and the class get loaded and after that applied with addDocked

Ext.Loader.setPath(  'Ext', 'http://docs.sencha.com/ext-js/4-1/extjs-build/examples');
Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    renderTo: Ext.getBody(),
    tbar: {
      xtype: 'statusbar',
      statusAlign: 'right',
        items: [
          {
            xtype: 'button', 
            text: 'show window', 
            id: 'ani-target', 
            handler: function(btn) { 
              if (btn.up('panel').down('window').isVisible()) {
                btn.up('panel').down('window').hide();
                btn.setText('maximize');
              }else {
                btn.up('panel').down('window').show();
                btn.setText('minimize');
                Ext.define('Ext.ux.custom.StatusBar',{
                  extend: 'Ext.ux.statusbar.StatusBar',
                  alias: 'widget.cstatus',
                  requires: ['Ext.ux.statusbar.StatusBar'],
                  text: 'Ready',
                  initComponent: function() {
                    this.callParent(arguments);
                  }
                });
                btn.up('panel').down('window').addDocked({ xtype: 'cstatus'});
              } 
            }
          }
        ],
    },
  items: [{
    xtype: 'window',
    closable: false,
    width: 100,
    height: 100,
    id: 'demo-win',
    animateTarget: 'ani-target'
  }]
})