惰性地向ext js应用程序添加第三方库(只有在需要时才这样做)

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

本文关键字：这样做 ext js 第三方 添加 应用程序      更新时间：2023-09-26

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

要在Ext js中加载一个新文件，我们可以使用require键: 
requires : ['MyApp.stores.UserStore']

在extjs文档中描述。我们是否也可以为第三方库做类似的事情?

注:-我使用Ext Js 4.1.0

更新

你应该可以用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'
  }]
})
相关文章：