Question

在我的ExtJS 4.0.7应用程序中，我有一些第三方javascripts，我需要动态加载以呈现某些面板内容（一些花哨的图表/可视化小部件）。

我遇到了一个古老的问题，即在我尝试使用它之前脚本没有完成加载。我认为ExtJS可能有一个优雅的解决方案（很像类加载器：Ext.Loader）。

我看过Ext.Loader和Ext.ComponentLoader，但似乎都没有提供我正在寻找的东西。我是否必须“自己滚动”并设置计时器以等待标记变量存在？

Answer 1

以下是ExtJS 4.1.x中如何完成的示例：

Ext.Loader.loadScript({
    url: '...',                    // URL of script
    scope: this,                   // scope of callbacks
    onLoad: function() {           // callback fn when script is loaded
        // ...
    },
    onError: function() {          // callback fn if load fails 
        // ...
    } 
});

Answer 2

我看过Ext.Loader和Ext.ComponentLoader，但都没看过似乎提供了我正在寻找的东西

真的看起来是真的。我认为唯一可以帮助你的是Loader的injectScriptElement方法（但是，它是私有的）：

var onError = function() {
  // run this code on error
};
var onLoad = function() {
  // run this code when script is loaded
};
Ext.Loader.injectScriptElement('/path/to/file.js', onLoad, onError);

似乎这种方法会做你想要的（这里是example）。但唯一的问题是，......你知道，这个方法被标记为私有。

Answer 3

这正是Ext.4-1中最新的Ext.Loader.loadScript可用于。

请参阅http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Loader-method-loadScript

Answer 4

对于你们所有的googlers，我最后通过借用一些Ext代码来推销自己：

 var injectScriptElement = function(id, url, onLoad, onError, scope) {
      var script = document.createElement('script'),
          documentHead = typeof document !== 'undefined' && (document.head || document.getElementsByTagName('head')[0]),
          cleanupScriptElement = function(script) {
               script.id = id;
               script.onload = null;
               script.onreadystatechange = null;
               script.onerror = null;

               return this;
          },
          onLoadFn = function() {
              cleanupScriptElement(script);
              onLoad.call(scope);
          },
          onErrorFn = function() {
              cleanupScriptElement(script);
              onError.call(scope);
          };

      // if the script is already loaded, don't load it again
      if (document.getElementById(id) !== null) {
           onLoadFn();
           return;
      }

      script.type = 'text/javascript';
      script.src = url;
      script.onload = onLoadFn;
      script.onerror = onErrorFn;
      script.onreadystatechange = function() {
          if (this.readyState === 'loaded' || this.readyState === 'complete') {
              onLoadFn();
          }
      };
      documentHead.appendChild(script);
      return script;
  }


var error = function() {
    console.log('error occurred');
}

var init = function() {
    console.log('should not get run till the script is fully loaded');
}

injectScriptElement('myScriptElem', 'http://www.example.com/script.js', init, error, this);

Answer 5

从我看来，在我看来你可以用一种黑客的方式做到这一点。尝试使用Ext.Loader.setPath()将虚假命名空间映射到第三方javascript文件，然后使用Ext.Loader.require()尝试加载它们。它看起来并不像ExtJS实际检查是否在包含的文件中定义了必需的类。

我可以使用Ext的加载器动态加载非ext脚本/对象吗？

5 个答案: