Extのローダーを使用して非extスクリプト/オブジェクトを動的に読み込むことはできますか？

Question

私のExtJS 4.0.7アプリケーションでは、特定のパネルの内容（一部の魅力的なチャート作成/ビジュアライゼーションウィジェット）をレンダリングするために動的にロードする必要があるサードパーティ製のJavaScriptがあります。

私はそれを使用しようとする前に、スクリプトが読み込みを終了しないという古くからの問題にぶつかります。私は、ExtJSがこのためのエレガントなソリューションを持っていると思っていました（クラスローダーのように：Ext.Loader）。

私はExt.LoaderとExt.ComponentLoaderの両方を調べましたが、どちらも私が探しているものを提供していないようです。私はちょうど "自分のロール"とマーカー変数が存在するのを待つためのタイマーをセットアップする必要がありますか？

Answer 1

それは本当だように見える本当に私はExt.LoaderとExt.ComponentLoaderの両方を見てきましたが、どちらも は私が

を探しているものを提供するように見えます。この方法は、あなたがやりたいのと同じよう

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である）ようだ：、私が思うに、ここであなたを助けることができる唯一のことは、（ただし、プライベートである）LoaderのinjectScriptElement方法です。しかし、唯一の問題は、方法はプライベートとマークされていることです。

Answer 2

ソースを見ると、あなたはちょっとハッキリしたやり方でそれをやることができます。 Ext.Loader.setPath()を使用して、偽の名前空間をサードパーティ製のjavascriptファイルにマップしてから、Ext.Loader.require()を使用してロードしようとしてください。 ExtJSは、必要なクラスが含まれているファイルで定義されているかどうかを実際にチェックしているようには見えません。そこにすべてのあなたのGooglerのために

Answer 3

、私はいくつかの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 4

これはExt.4-1から、まさに最新Ext.Loader.loadScriptですのために使用することができます。

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

Answer 5

を参照してくださいここでは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 
     // ... 
    } 
});