在Ext Js視口中動態地加載內容（面板）

Question

基本上我正在尋找這個問題，我有許多組件與服務器端用PHP寫在服務器端。

根據用戶的不同，我的組件將根據用戶的角色進行更改。

所以我需要知道如何做到這一點的任何方式/示例/信息。

1-我使用了加載函數EXTJS，但它清楚地表明我不會加載腳本只是純文本。

2-我使用的eval（），但即時有點害怕O此方法中，像該例子中箱佈局組件（靜態）

var contentPanel = new Ext.Panel({ 
       frame: true, 
       style: {marginTop: '10px'}, 
       height: 315, 
       border: true, 
       bodyBorder: false, 
       layout: 'fit', 
       id: 'contentPanel' 
      }); 


      var mainPanel = new Ext.Panel({ 
       title: 'Panel Principal', 
       id: 'mainPanel', 
       border: true, 
       frame: true, 
       width: '50%', 
       style: {margin: '50px auto 0 auto'}, 
       height: 400, 
       renderTo: Ext.getBody(), 
       items: [ 
         { 
          html: '<a href="#" onClick="requestContent(\'panel1\');">Panel 1</a>' 
         }, 
         { 
          html: '<a href="#" onClick="requestContent(\'panel2\');">Panel 2</a>' 
         }, 
         contentPanel 

       ] 
      }) 

和更新與寫在服務器上JS文件佈局的內容

function receiveContent(options, success, response) 
     { 



      var respuesta = response.responseText; 

      //console.log(respuesta); 

      eval(respuesta); 

      //console.log(options.url); 

      url = options.url; 

      url = url.substring(0,(url.search(/(\.)/))); 

      var contenedor = Ext.getCmp('contentPanel'); 

      contenedor.removeAll(); 

      var contenido = Ext.getCmp(url); 

      contenedor.add(contenido); 
      contenedor.doLayout(); 
     } 

     function requestContent(panel) 
     { 
      //panel es el nombre del archivo que quiero 
      Ext.Ajax.request({ 
       url: panel+'.js', 
       callback: receiveContent 
      }); 
     } 

任何其他方式爲此做什麼我不想做的就是讓一百萬個不同的組件，並在登錄時，許多人一樣加載它們都似乎說

Answer 1

爲了解決你的問題：

1. 的.load方法將加載腳本，一旦內容加載完成後對其進行評估，但做到這一點，你將需要設置腳本：true選項，一個例子可以是：

my_panel.load({ 
    url: 'url_to_load.php/hmt/html/asp...', 
    params: {param1: param1value, param2: param2value...etc}, 
    nocache: true, 
    timeout: 30, 
    scripts: true 
}); 

使用eval（）是細...但看到的腳本：上述accompl真配置選項在源代碼文件中填寫了javascript，你不需要使用它。

希望這有助於

Answer 2

您可能會使用類似於下面的內容來動態加載JavaScript - 網絡上有一百個變體。這樣，您將避免AJAX調用並處理響應（以及隨後的eval）。

var aHeadNode = document.getElementById('head')[0]; 
var aScript = document.createElement('script'); 
aScript.type = 'text/javascript'; 
aScript.src = "someFile.js"; 
aHeadNode.appendChild(oScript); 

Answer 3

我從你的問題明白那是什麼，你正在尋找一個回調處理，即回調函數動態JS文件加載器，只有當文件被完全加載就會被調用。我也面臨在啓動和搜索了很多，做了一些研究之後，類似的問題，我開發了下面的代碼，它提供了絕對的動態JS和CSS文件加載功能：

類ScriptLoader：（把它放在一個單獨的文件並在第一次加載）

ScriptLoader = function() { 
    this.timeout = 30; 
    this.scripts = []; 
    this.disableCaching = false; 
}; 

ScriptLoader.prototype = { 

    processSuccess : function(response) { 
     this.scripts[response.argument.url] = true; 
     window.execScript ? window.execScript(response.responseText) : window 
       .eval(response.responseText); 
     if (response.argument.options.scripts.length == 0) { 
     } 
     if (typeof response.argument.callback == 'function') { 
      response.argument.callback.call(response.argument.scope); 
     } 
    }, 

    processFailure : function(response) { 
     Ext.MessageBox.show({ 
        title : 'Application Error', 
        msg : 'Script library could not be loaded.', 
        closable : false, 
        icon : Ext.MessageBox.ERROR, 
        minWidth : 200 
       }); 
     setTimeout(function() { 
        Ext.MessageBox.hide(); 
       }, 3000); 
    }, 

    load : function(url, callback) { 
     var cfg, callerScope; 
     if (typeof url == 'object') { // must be config object 
      cfg = url; 
      url = cfg.url; 
      callback = callback || cfg.callback; 
      callerScope = cfg.scope; 
      if (typeof cfg.timeout != 'undefined') { 
       this.timeout = cfg.timeout; 
      } 
      if (typeof cfg.disableCaching != 'undefined') { 
       this.disableCaching = cfg.disableCaching; 
      } 
     } 

     if (this.scripts[url]) { 
      if (typeof callback == 'function') { 
       callback.call(callerScope || window); 
      } 
      return null; 
     } 

     Ext.Ajax.request({ 
        url : url, 
        success : this.processSuccess, 
        failure : this.processFailure, 
        scope : this, 
        timeout : (this.timeout * 1000), 
        disableCaching : this.disableCaching, 
        argument : { 
         'url' : url, 
         'scope' : callerScope || window, 
         'callback' : callback, 
         'options' : cfg 
        } 
       }); 

    } 

}; 

ScriptLoaderMgr = function() { 
    this.loader = new ScriptLoader(); 

    this.load = function(o) { 
     if (!Ext.isArray(o.scripts)) { 
      o.scripts = [o.scripts]; 
     } 

     o.url = o.scripts.shift(); 

     if (o.scripts.length == 0) { 
      this.loader.load(o); 
     } else { 
      o.scope = this; 
      this.loader.load(o, function() { 
         this.load(o); 
        }); 
     } 
    }; 

    this.loadCss = function(scripts) { 
     var id = ''; 
     var file; 

     if (!Ext.isArray(scripts)) { 
      scripts = [scripts]; 
     } 

     for (var i = 0; i < scripts.length; i++) { 
      file = scripts[i]; 
      id = '' + Math.floor(Math.random() * 100); 
      Ext.util.CSS.createStyleSheet('', id); 
      Ext.util.CSS.swapStyleSheet(id, file); 
     } 
    }; 

    this.addAsScript = function(o) { 
     var count = 0; 
     var script; 
     var files = o.scripts; 
     if (!Ext.isArray(files)) { 
      files = [files]; 
     } 

     var head = document.getElementsByTagName('head')[0]; 

     Ext.each(files, function(file) { 
        script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        if (Ext.isFunction(o.callback)) { 
         script.onload = function() { 
          count++; 
          if (count == files.length) { 
           o.callback.call(); 
          } 
         } 
        } 
        script.src = file; 
        head.appendChild(script); 
       }); 
    } 
}; 

ScriptMgr = new ScriptLoaderMgr(); 

現在可以採用這種方式：

對於CSS文件加載：

ScriptMgr.loadCss([first.css', 'second.css']); 

也就是說，你只需要提供的css文件路徑的陣列和陣列傳遞給loadCss（）函數作爲參數。 CSS文件不需要回調。

對於JS文件加載：

ScriptMgr.load({ 
    scripts : ['lib/jquery-1.4.2.min.js','lib/jquery.touch-gallery-1.0.0.min.js'], 
    callback : function() {    
      //Here you will do those staff needed after the files get loaded 
    }, 
    scope : this 
}); 

在這種情況下，您輸入CSS文件的方式，在這裏你只需要提出的JS文件數組中的腳本選項。回調函數僅在所有JS文件加載成功時才被調用。另外，如果在任何情況下，JS文件已經加載到瀏覽器中（即已經運行了一次），那麼控件將自動轉到回調函數。