javascript - 懒惰地将第三方库添加到 ext js 应用程序(仅在需要时)

Question

我想懒惰地将第三方 js 添加到 sencha 应用程序中，只有在渲染新窗口时，例如单击按钮时，才会弹出一个新窗口，当发生这种情况时，d3.js 库 js 是也加载了。

为了在 Ext js 本身加载一个新文件，我们可以使用 requires 键:

requires : ['MyApp.stores.UserStore']

如 extjs documentation 中所述.我们也可以为第三方图书馆做这样的事情吗？

附言- 我正在使用 Ext Js 4.1.0

Answer 1

更新

您应该能够使用 Ext.Loader 加载几乎任何东西。 loadScript(options) 该方法还提供了一个在加载完成时调用的回调。

---

基本上你可以加载任何东西，只要它是每个文件的单个 ExtJS 类(我必须承认我从未尝试过任何其他东西!)。您可以使用

注册其他路径

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

并且在运行时需要一些东西是很容易的，只要加载器配置好了。下面是一个在运行时从另一个域和一个完整的新路径加载 Ext.ux.statusbar.StatusBar 的示例。这是 JSFiddle - 只需单击按钮即可加载类，然后使用 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'
  }]
})