Tôi có thể sử dụng trình tải của Ext để tải các tập lệnh/đối tượng không tự động không?

Question

Trong ứng dụng ExtJS 4.0.7 của tôi, tôi có một số javascripts bên thứ 3 mà tôi cần tải động để hiển thị một số nội dung của bảng điều khiển (một số tiện ích biểu đồ/hiển thị ưa thích).

Tôi gặp sự cố cũ mà tập lệnh không tải xong trước khi tôi cố gắng sử dụng. Tôi nghĩ ExtJS có thể có một giải pháp thanh lịch cho điều này (giống như bộ nạp lớp: Ext.Loader).

Tôi đã xem cả hai tệp Ext.Loader và Ext.ComponentLoader, nhưng dường như không cung cấp những gì tôi đang tìm kiếm. Tôi có phải chỉ "cuộn của riêng tôi" và thiết lập một bộ đếm thời gian để chờ cho một biến đánh dấu tồn tại?

Answer 1

tôi đã xem xét cả hai Ext.Loader và Ext.ComponentLoader, nhưng không phải dường như cung cấp những gì tôi đang tìm kiếm

Thật trông giống như đó là sự thật. Điều duy nhất có thể giúp bạn ở đây, tôi nghĩ, là phương pháp injectScriptElement Loader của (trong đó, tuy nhiên, là tư nhân):

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); 

Có vẻ như phương pháp này sẽ làm những gì bạn muốn (ở đây là example). Nhưng vấn đề duy nhất là, ... bạn biết đấy, phương pháp được đánh dấu là riêng tư.

Answer 2

Từ nhìn vào nguồn, có vẻ như với tôi rằng bạn có thể làm điều đó theo một cách đáng sợ. Hãy thử sử dụng Ext.Loader.setPath() để ánh xạ không gian tên không có thật cho các tệp javascript của bên thứ ba của bạn và sau đó sử dụng Ext.Loader.require() để thử tải chúng. Nó không giống như ExtJS thực sự kiểm tra nếu yêu cầu lớp được định nghĩa trong tập tin bao gồm.

Answer 3

Đối với tất cả các bạn nhân viên của Google trên mạng, tôi đã kết thúc cán của riêng tôi bằng cách vay mượn một số mã 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

Đây chính là điều Ext.Loader.loadScript mới nhất từ ​​Ext.4-1 có thể được sử dụng cho.

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

Answer 5

Dưới đây là một ví dụ về cách nó được thực hiện trong 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 
     // ... 
    } 
});