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

Question

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

要在Ext js中加载新文件,我们可以使用requires键:

requires : ['MyApp.stores.UserStore']

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

PS - 我正在使用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'
  }]
})