6

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

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

requires : ['MyApp.stores.UserStore']

如extjs 文档中所述。我们也可以为第三方库做这样的事情吗？

PS - 我正在使用 Ext Js 4.1.0

4

1 回答 1

5

更新

您应该能够使用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'
  }]
})
于 2013-01-14T10:59:00.433 回答