aggiungi una libreria di terze parti per estendere pigramente l'applicazione js (cioè solo quando è richiesta)

Question

Voglio aggiungere una js di terze parti a un'applicazione sencha, pigramente, solo quando si esegue il rendering di una nuova finestra, ad esempio facendo clic su un pulsante , viene visualizzata una nuova finestra e, quando ciò accade, viene caricata anche la libreria d3.js.

Per il caricamento di un nuovo file in Ext JS per sé, possiamo usare richiede chiave:

requires : ['MyApp.stores.UserStore'] 

come descritto nella extjs documentation. Possiamo fare qualcosa di simile anche per le librerie di terze parti?

P.S. - Sto usando Ext JS 4.1.0

Answer 1

Aggiornamento

Si dovrebbe essere in grado di caricare quasi tutto con Ext.Loader. loadScript(options) Il metodo fornisce anche un callback che viene chiamato al termine del caricamento.

---

Fondamentalmente si può caricare qualsiasi cosa, purché si tratta di una singola classe ExtJS per file (devo ammettere che non ho mai provato niente altro!). È possibile registrare percorsi aggiuntivi utilizzando

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

e richiedono qualcosa in fase di esecuzione è abbastanza semplice purché il caricatore sia configurato per quello. Di seguito è riportato un esempio che carica lo Ext.ux.statusbar.StatusBar in fase di runtime da un altro dominio e un nuovo percorso completo. Ecco il JSFiddle - è sufficiente fare clic sul pulsante e la classe vengono caricati e dopo quella applicata con 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' 
    }] 
})